使用jquery提交FormData数据

2019-11-02 18:27:53

字体：大中小

来源：转载

供稿：网友

源码示例

<!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="file123" 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; } } var formData = new FormData($('#form')[0]);// 自动搜索#form里面的name值不为空的input(注意：type=file的input会被搜索到，但不能携带文件流，所以在下面我主动添加进了formData) formData.append('b', 3); $('button').on('click', function() { formData.append('file', document.querySelector('[type=file]').files[0]);// 由于上面不会搜索到type=file的input，所以在这里将它主动添加到formData中(注意：需使用原生方式获取) $.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>