• 异步上传文件,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("上传失败!");
                        }
                    });                             
            }    
  • 相关阅读:
    集训Day 7 2020.3.7 动态规划(二)
    集训Day 6 2020.3.6 动态规划(一)
    集训Day 5 2020.3.4 杂题选讲(二)
    集训Day 4 2020.3.3 杂题选讲(一)
    集训Day 2 2020.3.1 数论(质数与筛法)
    集训Day 1 2020.2.29 数论复习(gcd)(一)
    [BZOJ4152]The Captain
    知识点清单(全)
    字符串相关知识
    分块相关知识
  • 原文地址:https://www.cnblogs.com/lydiawork/p/8488893.html
Copyright © 2020-2023  润新知