html5 提交表单数据,Html5 FormData+Ajax表单数据提交

首先来认识一下FormData表单

var formData = new FormData();

formData.append('name', 'zhangsan');

formData.append('age', 20);

formData.append('gender', 'M');

//防止跨域，注意，该字符串由服务端生成后一部分发送到session中，一部分放在form隐藏域中

formData.append('csrf', 'yty98db128swdx827dcd3jdxh');

或者使用另一种方式

var formData = new FormData(document.forms['registerform']);

formData.append('csrf', 'yty98db128swdx827dcd3jdxh');

让后构建Ajax

function sendForm(formData) {

var xhr = new XMLHttpRequest();

xhr.open('POST', form.action, true);

xhr.onload = function(e) {         // ...     };

// 指定通信过程中状态改变时的回调函数

xhr.onreadystatechange = function()

{

// 通信成功时，状态值为4

var completed = 4;

if(xhr.readyState === completed)

{

if(xhr.status === 200)

{

// 处理服务器发送过来的数据

}else{             // 处理错误

}

}

};

xhr.send(formData);

}

使用FormData进行文件上传

function uploadFiles(url, files) {

var formData = new FormData();

for (var i = 0, file; file = files[i]; ++i)

{

formData.append(file.name, file);

}

var xhr = new XMLHttpRequest();

xhr.open('POST', url, true);

xhr.onload = function(e) { ... };

xhr.send(formData);  // multipart/form-data }

document.querySelector('input[type="file"]').addEventListener('change', function(e) {

uploadFiles('/server', this.files); },

false);

function upload(blobOrFile)

{

var xhr = new XMLHttpRequest();

xhr.open('POST', '/server', true);

xhr.onload = function(e) { ... };   // Listen to the upload progress.

var progressBar = document.querySelector('progress');

xhr.upload.onprogress = function(e) {

if (e.lengthComputable) {

progressBar.value = (e.loaded / e.total) * 100;

progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.

}

};

xhr.send(blobOrFile);

}

upload(new Blob(['hello world'], {type: 'text/plain'}));