zoukankan      html  css  js  c++  java
  • 异步上传文件,jquery+ajax,显示进度条

    //文件数量限制  
    var filesCount=2000;  
    //文件夹大小限制 2000M  
    var filesSize=2147483648;
    //上传按钮是否可以点击
    var uploadState = true;
    
    function saveMemberMeg(){
        if(uploadState){
            var formData = new FormData();
            var fileObj = $("#UPLOAD_DATA")[0]; 
            var files = fileObj.files;
            if(!dataIsExist(files) || files.length <= 0){
                alert("未选择上传文件");
                return;
            }
            for (var index in files) {
                formData.append("files", files[index]);
                formData.append("lastModified-"+files[index].name, files[index].lastModified);//文件最后修改时间
                if(index == 0){//保存文件夹名
                    var UPLOAD_FILENAME = files[index].webkitRelativePath.substring(0, files[index].webkitRelativePath.indexOf('/'));
                    formData.append("UPLOAD_FILENAME", UPLOAD_FILENAME);
                }
            }
            
            var AUTO_ARCHIVE = '是';
            if(!$("#AUTO_ARCHIVE").prop("checked")){
                AUTO_ARCHIVE = '否';
            }
            formData.append("AUTO_ARCHIVE", AUTO_ARCHIVE);
            var MANUAL_CHECK = '否';
            formData.append("MANUAL_CHECK", MANUAL_CHECK);
            var AIRCREW = $.trim($("#AIRCREW").val());
            if(!dataIsExist(AIRCREW)){
                alert("巡检机组不能为空!");
                return;
            }
            formData.append("AIRCREW", AIRCREW);
            var UPLOAD_REMARK = $.trim($("#UPLOAD_REMARK").val());
            if(!dataIsExist(UPLOAD_REMARK)){
                alert("上传备注不能为空!");
                return;
            }
            formData.append("UPLOAD_REMARK", UPLOAD_REMARK);
            
            $("#uploadBtnId").css("cursor", "not-allowed");
            uploadState = false;
            $.ajax({
                type : "post",
                async : true,
                url : "${pageContext.request.contextPath}/biz/dataManagement/patrolDataAccess.do?action=uploadData",
                contentType : false,
                processData : false,
                data : formData,
                dataType : "text",
                cache : false,
                xhr:function(){                        
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',function(e){
                             var loaded = e.loaded;//已经上传大小情况
                             var tot = e.total;//附件总大小
                             var state = Math.floor(100 * loaded / tot);
                             $("#UPLOAD_STATUE").css("width", state+'%');
                             $("#UPLOAD_STATUE").html(state+'%');
                        }, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                success : function(data) {
                    querydata();
                },
                error : function(data) {
                    alert("系统异常,请重试!");
                }
            });
        }
    }
  • 相关阅读:
    令人惊艳的算法——蒙特卡洛采样法
    肺炎确诊人数增长趋势拟合和预测(截止1月28日)
    「07」回归的诱惑:深入浅出逻辑回归
    实现一个简易版Webpack
    nrm——快速切换npm源
    7个有用的JavaScript技巧
    JSON Web Token 是什么?
    【译】强化表单的9个Vue输入库
    【译】如何使用Vue过渡效果来提升用户体验
    【译】JavaScript Source Maps浅析
  • 原文地址:https://www.cnblogs.com/4AMLJW/p/Progress202005171517.html
Copyright © 2011-2022 走看看