https://blog.csdn.net/u011500781/article/details/54931716
http://yunzhu.iteye.com/blog/2177923
***********************************************
<!doctype html><html><head> ???<title>测试</title> ???<meta charset="utf8"> ???<script src="../js/jquery-1.11.3.min.js"></script></head><body> ???<form id="form"> ???????<input name="file" type="file" /> ???????<input name="a" value="1" /> ???????<input value="2" /> ???</form> ???<button>提交</button></body></html><script> ???$(function() { ???????// 监听上传进度 ???????var xhrOnProgress = function(fun) { ???????????xhrOnProgress.onprogress = fun; //绑定监听 ???????????return function() { ???????????????//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 ???????????????var xhr = $.ajaxSettings.xhr(); ???????????????//判断监听函数是否为函数 ???????????????if (typeof xhrOnProgress.onprogress !== ‘function‘) ???????????????????return xhr; ???????????????//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 ???????????????if (xhrOnProgress.onprogress && xhr.upload) { ???????????????????xhr.upload.onprogress = xhrOnProgress.onprogress; ???????????????} ???????????????return xhr; ???????????} ???????} ???????$(‘button‘).on(‘click‘, function() { ???????????var formData = new FormData($(‘#form‘)[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到),IE<=9不支持FormData ???????????formData.append(‘b‘, 3);// 还可以添加额外的表单数据 ???????????$.ajax({ ???????????????type: ‘post‘, ???????????????url: ‘../../../material/jQueryFileUpload?type=1‘, ???????????????data: formData, ???????????????contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置(详见:#1) ???????????????processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post,详见:#2) ???????????????xhr: xhrOnProgress(function(e){// (详见:#3) ???????????????????var percent=e.loaded / e.total;//计算百分比 ???????????????????$(‘body‘).append(‘->‘+ percent); ???????????????}), ???????????????success: function(data) { ???????????????????$(‘body‘).append(‘完成‘); ???????????????} ???????????}) ???????}) ???})</script>
使用jquery提交FormData数据
原文地址:https://www.cnblogs.com/zhao1949/p/9072633.html