[TOC] ## 不帶進度條 1. 通過 `new FormData` 可以實現文件的異步上傳 ``` <form method="post" id="pack" action="{:U('pack_upload_post')}" enctype="multipart/form-data" > <input type="file" name="pack" > <button type="submit" class="btn btn-primary">上傳</button> </form> <script> $("form").submit(function(e){ e.preventDefault(); $.ajax({ url:"{:U('pack_upload_post')}", type:"post", data:new FormData(document.getElementsByTagName("form")[0]), processData:false, contentType:false, }).done(function(res) { //code }).fail(function(res) { //code }); }); </script> ``` ## 文件上傳顯示進度 `new FormData($('#form_input')[0])` 可以把 $_POST和$_FILE 一起提交 ``` $.ajax({ url:uploadUrl + "?flag=input", type: 'POST', cache: false, data: new FormData($('#form_input')[0]), processData: false, contentType: false, beforeSend: function(){ progressJs().start(); }, success: function(result) { progressJs().end(); }, error: function (result) { }, xhr: function(){ var xhr = $.ajaxSettings.xhr(); if(onprogress && xhr.upload) { xhr.upload.addEventListener("progress" , onprogress, false); return xhr; } } }); function onprogress(evt){ if (evt.lengthComputable) { //evt.loaded：文件上傳的大小 evt.total：文件總的大小 var percentComplete = Math.round((evt.loaded) * 100 / evt.total); //加載進度條，同時顯示信息 progressJs().set(percentComplete); } } ``` ## 帶進度條,使用bootcss 按鈕 ``` <form method="post" id="pack" action="{:U('pack_upload_post')}" enctype="multipart/form-data" > <input type="file" name="pack" > <button type="submit" class="btn btn-primary">上傳</button> </form> var button_submit =$("button[type=submit]") $("form").submit(function(e){ button_submit.attr("disabled","disabled") var url = $(this).attr("action"); var type= $(this).attr("method"); e.preventDefault(); $.ajax({ url:url, type:type, data:new FormData(document.getElementsByTagName("form")[0]), processData:false, contentType:false, xhr: function(){ var myXhr = $.ajaxSettings.xhr(); //獲取ajaxSettings中的xhr對象，為它的upload屬性綁定progress事件的處理函數 if(myXhr.upload){ //綁定progress事件的回調函數 myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } //xhr對象返回給jQuery使用 return myXhr; }, success:function(){} }).done(function(res) { button_submit.attr("disabled",null) button_submit.html("上傳") showTip(res) }).fail(function(res) { showTip(res) button_submit.html("上傳") }); }); function progressHandlingFunction(e) { if (e.lengthComputable) { //e.loaded 上傳大小 //e.total 文件大小 var percent = (e.loaded/e.total)*100; percent =percent.toFixed(2); button_submit.html("上傳 ( "+percent+" %)") } } ```