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]);
      }
  }