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("上传失败!");
                        }
                    });                             
            }    
  • 相关阅读:
    WebView自适应屏幕
    shell脚本:遍历删除
    查看Mysql执行计划
    Spring 源码学习(八) AOP 使用和实现原理
    Java:控制反转(IoC)与依赖注入(DI)
    浏览器-开发者工具
    查看kafka消息消费情况
    shell脚本:遍历删除文本内路径上文件
    聚簇索引与非聚簇索引(也叫二级索引)
    有关MySQL
  • 原文地址:https://www.cnblogs.com/lydiawork/p/8488893.html
Copyright © 2011-2022 走看看