zoukankan      html  css  js  c++  java
  • 异步上传文件,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("上传失败!");
                        }
                    });                             
            }    
  • 相关阅读:
    jvm 指令 invokedynamic
    go switch
    JVM指令 bytecode invokespecial
    babel插件开发
    go 循环依赖 循环引用 最佳实践
    go module 使用入门
    搞懂gopath golang go go项目结构
    SQL Server 工具
    SQLServer Management Studio登录框中的“服务器名”填写
    win2008下安装SQL SERVER 2005出现IIS功能要求 警告解决方案
  • 原文地址:https://www.cnblogs.com/lydiawork/p/8488893.html
Copyright © 2011-2022 走看看