異步上傳文件，jquery+ajax，顯示進度條

根據網上的資料，作了不少修改，結果發現使用ajax上傳數據時若要監聽xhr.upload.addEventListener("progress",functiion(e),false)，必須將async設置爲true。

例子：

 

//上傳文件
        function uploadFiles(){                                            
                
                var formData = new FormData();
                 formData.append("file",$("#uploadFile")[0].files[0]);//append()裏面的第一個參數file對應permission/upload裏面的參數file
                                  
                 $.ajax({
                    type:"post",
                    async:true,  //這裏要設置異步上傳，才能成功調用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函數
                    Accept:'text/html;charset=UTF-8',
                    data:formData,
                    contentType:"multipart/form-data",
                    url: uploadUrl,
                    processData: false, // 告訴jQuery不要去處理髮送的數據
                    contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
                    xhr:function(){                        
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // check if upload property exists
                            myXhr.upload.addEventListener('progress',function(e){                            
                                var loaded = e.loaded;                  //已經上傳大小狀況 
                                var total = e.total;                      //附件總大小 
                                var percent = Math.floor(100*loaded/total)+"%";     //已經上傳的百分比  
                                console.log("已經上傳了："+percent);                 
                                $("#processBar").css("width",percent);                                                                
                            }, false); // for handling the progress of the upload
                        }
                        return myXhr;
                    },                    
                    success:function(data){                      
                        console.log("上傳成功!!!!");                        
                    },
                    error:function(){
                        alert("上傳失敗！");
                    }
                });                             
        }