jq 拖拽上传文件

       

将文件拖到此处，或点击上传

 

    

#drop_area{
    border: 2px dashed silver;
    width: 100%;
    height: 200px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

/上传文件
document.addEventListener("drop",function(e){  //拖离   
    e.preventDefault();      
})  
document.addEventListener("dragleave",function(e){  //拖后放   
    e.preventDefault();      
})  
document.addEventListener("dragenter",function(e){  //拖进  
    e.preventDefault();      
})  
document.addEventListener("dragover",function(e){  //拖来拖去    
    e.preventDefault();      
}) 
var uploadFileErrorMsg=[],uploadFileSize=0,uploadFileIndex=0,startUploadFileFlag=false;
$("body").on("drop","#drop_area",function(e){
    uploadFileErrorMsg=[];
    uploadFileIndex=0;
    startUploadFileFlag=false;
    var fileList = e.originalEvent.dataTransfer.files; //获取文件对象    
        if(fileList.length == 0){                
            return false;            
        }
         uploadFileSize=fileList.length;
        for(var a=0;a             if(checkUploadFile(fileList[a])){
                startUploadFile(fileList[a]);
            }
        }
});
$("body").on("click","#drop_area",function(){
    $("#fileInput").click();
})
    $("body").on("change","#fileInput",function(el){
            uploadFileErrorMsg=[];
        uploadFileIndex=0;
        startUploadFileFlag=false;
            var fileList=el.target.files;
             if(fileList.length == 0){                
                return false;            
        }
            uploadFileSize=fileList.length;
        for(var a=0;a             if(checkUploadFile(fileList[a])){
                startUploadFile(fileList[a]);
            }
        }
        if(!startUploadFileFlag&&uploadFileErrorMsg.length){
            showErrorFileMsg(uploadFileErrorMsg,"文件上传失败！")
        }
})
function showErrorFileMsg(uploadFileErrorMsg,title){
    var filteErrorHtml="

以下文件上传失败，请重新上传：

"
        for(var a=0;a             filteErrorHtml+="
• "+uploadFileErrorMsg[a]+"
"
        }
        filteErrorHtml+="

"
        layer.open({
              type:0,
              btnAlign: 'c',
              title:title,
              area: ['420px', '240px'], //宽高
              content: filteErrorHtml
            });
}
function checkUploadFile(file){
    var uploadType=['pdf', 'png', 'jpg','jpeg', 'bmp', 'gif','xls','xlsx','docx','doc','tif','rtf'];
    var type=file.name.substr(1 + file.name.lastIndexOf('.')).toLowerCase();
    var fileTypeOK = uploadType.indexOf(type)>-1;
    var isLt5M = file.size / 1024 / 1024 < 5;
        if (!fileTypeOK) {
            uploadFileErrorMsg.push("【"+file.name+"】格式不支持")
        }
       if (!isLt5M) {
       uploadFileErrorMsg.push("【"+file.name+"】文件超过5M了")
       }
       return fileTypeOK&&isLt5M
}
function createXHR(){
    var xhr=null;
   if(window.XMLHttpRequest){
       xhr=new XMLHttpRequest();
   }  //要是支持XMLHttpRequest的则采用XMLHttpRequest生成对象
   else if(window.ActiveXobiect){
       xhr=new ActiveXobiect('Microsoft.XMLHTTP');
   }//要是支持win的ActiveXobiect则采用ActiveXobiect生成对象。
    return xhr;
 }
function startUploadFile(resultfile){  
    startUploadFileFlag=true;
    var xhr = createXHR();
    var formData = new FormData(); 
    formData.append('uploadFile', resultfile);  
    formData.append('file', resultfile);  
    xhr.open('POST', '${pageContext.request.contextPath}/jabil/file/uploadFile.do'); 
    xhr.send(formData);
    var uploadFileLoading = layer.msg("文件上传中...")
    xhr.onreadystatechange = function(){ 
　　　　if (xhr.readyState == 4 && xhr.status == 200 ) { 
         uploadFileIndex++;
　　　　　　var res=JSON.parse(xhr.responseText);
         vm.scmOrderVo.orderFileList.push(res.data[0]);
         console.log("uploadFileIndex",uploadFileIndex);
         console.log("uploadFileSize",uploadFileSize);
         console.log("uploadFileErrorMsg.length",uploadFileErrorMsg.length)
         if(uploadFileIndex===(uploadFileSize-uploadFileErrorMsg.length)){
            layer.close(uploadFileLoading);
            if(uploadFileErrorMsg.length===0){
                layer.msg("文件上传成功！");
            }else{
                showErrorFileMsg(uploadFileErrorMsg,"文件上传成功");
            }
         }
　　　　}  
　　};  
}