input 文件監聽 以及上傳

文件上傳監聽 

<a v-show="filesArr.length<5"   @click="fileUpLoad()">
                          點擊選中附件
</a> 
   
<div style="display:none;">
        <form  id = "form1" action="##"  method="post" enctype="multipart/form-data">
            <input multiple="multiple"  id="fileUP" type="file" onchange="fileChange()" name="file1" value="選擇文件" >
           
            <input type="button" value="上傳" onclick="fileUpLoad()">
        </form>   
</div>

 觸發文件選擇框彈出

function fileUpLoad(){ //觸發 input的點擊事件,彈出文件選擇框2 
    $("#fileUP").click();4 
}

 

文件監聽方法,頁面加載后執行:fileAddEventListener();

   var fileUP = document.getElementById('fileUP');
       fileUP.addEventListener('change', function() {
           var t_files = this.files;       
           if(t_files.length>5){
               t_files.value='';
               top.postMessage({func:'msg',data:{idNum:app.idnum,icon:'2',anim:'6',msg:'文件數量超限,最多支持5個文件!'}},"*");               
               console.log('文件數量超限,最多支持5個文件!');              
           };           
           //上傳文件  將文件存入新的數組,進行操作
           for (var i = 0;i<t_files.length; i++) {
               if(t_files[i].size/1024/1024<101){//單個文件限制100M
                   app.filesArr.push(t_files[i]);
               }else{
                   var thisNames =t_files[i].name;
                   var thisSize     =t_files[i].size/1024/1024+'MB';                  
                   var msg ='存在超過100MB的單個文件!'
                   top.postMessage({func:'msg',data:{idNum:app.idnum,icon:'2',anim:'6',msg:msg}},"*"); 
               }               
               };
               //清空file
            var file = document.getElementById("fileUP");
             // for IE, Opera, Safari, Chrome
             if (file.outerHTML) {
                 file.outerHTML = file.outerHTML;
             } else { // FF(包括3.5)
                 file.value = "";
             };
             //再次設置監聽
             fileAddEventListener();
       }, false);

 var form = new FormData();
           
            for (var i = 0;i<app.filesArr.length; i++) {
            // 文件名稱，文件對象
                form.append(app.filesArr[i].name, app.filesArr[i]);
            }

 $.ajax({
            //幾個參數需要注意一下
                type: "POST",//方法類型
                dataType: "json",//預期服務器返回的數據類型
                url: "../../insertFile.action" ,//url
                //data: $('#form1').serialize(),
                data:form,
                // contentType:"multipart/form-data",
                contentType: false,
                processData: false,
                async: false,
               // cache: false,
                 success: function (json_data) {
                       // alert("恭喜你！上傳成功");
                           console.log(json_data);
                           name= json_data;
                    },
                 error : function() {
                     //alert("異常！");
                    name= "";
                } 
            });

 頁面提示:

　　默認狀態:

　　　　

　　選擇1-4個文件時:

　　　　

　　選擇5個文件時:

　　 

文件名 file.name

文件大小file.size

 

文件批量下載方法

  function downloadFunc(name, href) {     
      var a = document.createElement("a"), //創建a標簽
          e = document.createEvent("MouseEvents"); //創建鼠標事件對象
      e.initEvent("click", false, false); //初始化事件對象
      a.href = href; //設置下載地址
      a.download = 'download'; //設置下載文件名
      a.dispatchEvent(e); //給指定的元素，執行事件click事件
  };
  function downName(hrefArr) {//hrefArr 地址數組../../downLoadFile.action?path=D:apache-tomcat-8.5.35webapps%255Cservice_file/20190415161813900_%25E6%2589%2593%25E4%25B8%258D%25E5%25BC%2580%2520.jpg&filename=20190415161813900_%25E6%2589%2593%2
      for (let index = 0; index < hrefArr.length; index++) {
          downloadFunc('第' + index + '個文件', hrefArr[index]);
      }
  }