//ajax異步上傳 $.ajax({ url: "${pageContext.request.contextPath }/upload", type: "POST", data: formData, xhr: function(){ //獲取ajaxSettings中的xhr對象,為它的upload屬性綁定progress事件的處理函數 myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ //檢查upload屬性是否存在 //綁定progress事件的回調函數 myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; //xhr對象返回給jQuery使用 }, success: function(result){ $("#result").html(result); }, contentType: false, //必須false才會自動加上正確的Content-Type processData: false //必須false才會避開jQuery對 formdata 的默認處理 });
//上傳進度回調函數: function progressHandlingFunction(e) { if (e.lengthComputable) { $('#progress').attr({value : e.loaded, max : e.total}); //更新數據到進度條 var percent = e.loaded/e.total*100; $('#progress').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%"); $('#progress').css('width', percent.toFixed(2) + "%"); } }