异步上传文件,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("上传失败!");
                    }
                });                             
        }    

 

posted @ 2018-03-01 15:57  lizi0_0  阅读(9450)  评论(6编辑  收藏  举报