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("系统异常,请重试!");
                }
            });
        }
    }
  • 相关阅读:
    线性回归模型练习
    《代码整洁之道》读书笔记五
    第八周总结
    第七周总结
    《代码整洁之道》读书笔记四
    《代码整洁之道》读书笔记三
    第六周总结
    《代码整洁之道》读书笔记二
    第五周总结
    HDFS的JavaAPI操作
  • 原文地址:https://www.cnblogs.com/4AMLJW/p/Progress202005171517.html
Copyright © 2011-2022 走看看