使用jquery提交FormData數據
阿新 • • 發佈：2018-05-22
app 綁定 百分比 序列化 fun req clas min back
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數據