FormData+Ajax实现上传进度监控
什么是FormData？
FormData对象可以组装一组用XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同；
如何创建一个FormData对象
你可以自己创建一个FormData对象，然后通过调用它的append()方法添加字段，就像这样：
//实例化一个formData对象
varformData=newFormData();
formData.append("username","Groucho");
formData.append("userid",123456);//数字123456会被立即转换成字符串"123456"
//HTML上的文件类型input[type=file]的文件框，由用户选择
formData.append("userfile",fileInputElement.files[0]);
//JavaScriptfile-like对象
varcontent='hey!';//新文件的正文...
varblob=newBlob([content],{type:"text/xml"});
formData.append("webmasterfile",blob);
注意：字段“userfile”和“webmasterfile”都包含一个文件.字段“userid”是数字类型，它将被FormData.append()方法转换成字符串类型(FormData对象的字段类型可以是Blob,File,或者string:如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。
使用jQuery的Ajax方法发送FormData数据
//记录当前时间
vartime=newDate().getTime();
//记录当前进度
varpercentage=null;
//记录当前上传速度
varvelocity=null;
//记录已上传文件字节大小
varloaded=0;
$.ajax({
url:'Url',
type:"POST",
data:formData,
contentType:false,//必须不设置内容类型
processData:false,//必须不处理数据
xhr:functionxhr(){
//获取原生的xhr对象
varxhr=$.ajaxSettings.xhr();
if(xhr.upload){
//添加progress事件监听
xhr.upload.addEventListener('progress',function(e){
varnowDate=newDate().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);
}
returnxhr;
},
success:functionsuccess(response){
//成功回调
},
error:functionerror(error){
//失败回调
}
});
总结
以上所述是小编给大家介绍的FormData+Ajax实现上传进度监控，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！