ajax传formdata类型的数据_FormData+Ajax实现上传进度监控

AJAX 的 FormData+Ajax实现上传进度监控

什么是FormData？

FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同；

如何创建一个FormData对象

你可以自己创建一个FormData对象，然后通过调用它的append()方法添加字段，就像这样：

//实例化一个formData对象

var formData = new FormData();

formData.append("username", "Groucho");

formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"

// HTML上的 文件类型input[type=file]的文件框，由用户选择

formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象

var content = 'hey!'; // 新文件的正文...

var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

注意：字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “userid” 是数字类型，它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。

使用jQuery的Ajax方法发送FormData数据

//记录当前时间

var time=new Date().getTime();

//记录当前进度

var percentage =null;

//记录当前上传速度

var velocity=null;

//记录已上传文件字节大小

var loaded=0;

$.ajax({

url: 'Url',

type: "POST",

data: formData,

contentType: false, // 必须 不设置内容类型

processData: false, // 必须 不处理数据

xhr: function xhr() {

//获取原生的xhr对象

var xhr = $.ajaxSettings.xhr();

if (xhr.upload) {

//添加 progress 事件监听

xhr.upload.addEventListener('progress', function (e) {

var nowDate = new Date().getTime();

//每一秒刷新一次状态

if (nowDate - time >= 1000) {

//已上传文件字节数/总字节数

percentage = parseInt(e.loaded / e.total * 100);

//当前已传大小(字节数)-一秒前已传文件大小(字节数)

velocity = (e.loaded - loaded) / 1024;

if (percentage >= 99) {

$(".hintText").html('服务端正在解析，请稍后');

} else {

//修改上次记录时间及数据大小

time = nowDate;

loaded = e.loaded;

}

} else {

return;

}

}, false);

}

return xhr;

},

success: function success(response) {

//成功回调

},

error: function error(error) {

//失败回调

}

});

总结

以上所述是小编给大家介绍的FormData+Ajax实现上传进度监控，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: