异步上传文件，jquery+ajax，显示进度条

Posted 2021-02-19 向着阳光漫步

//文件数量限制  
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("系统异常，请重试！");
            }
        });
    }
}