formdata类型其实是在xmlhttprequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于xhr传输）提供便利。接下来通过本文给大家分享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 = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文... 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) { //失败回调 } });
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
ajaxfileupload.js实现文件上传（附步骤代码）
php获取ajax的headers方法与内容实例
ajaxfileupload.js实现文件上传（附步骤代码）
以上就是formdata+ajax实现上传进度监控的详细内容。