文件上传监听
1 <a v-show="filesArr.length<5" @click="fileUpLoad()"> 2 点击选中附件 3 </a> 4 5 <div style="display:none;"> 6 <form id = "form1" action="##" method="post" enctype="multipart/form-data"> 7 <input multiple="multiple" id="fileUP" type="file" onchange="fileChange()" name="file1" value="选择文件" > 8 9 <input type="button" value="上传" onclick="fileUpLoad()"> 10 </form> 11 </div>
触发文件选择框弹出
1 function fileUpLoad(){ //触发 input的点击事件,弹出文件选择框2 2 $("#fileUP").click();4 3 }
文件监听方法,页面加载后执行:fileAddEventListener();
1 var fileUP = document.getElementById('fileUP'); 2 fileUP.addEventListener('change', function() { 3 var t_files = this.files; 4 if(t_files.length>5){ 5 t_files.value=''; 6 top.postMessage({func:'msg',data:{idNum:app.idnum,icon:'2',anim:'6',msg:'文件数量超限,最多支持5个文件!'}},"*"); 7 console.log('文件数量超限,最多支持5个文件!'); 8 }; 9 //上传文件 将文件存入新的数组,进行操作 10 for (var i = 0;i<t_files.length; i++) { 11 if(t_files[i].size/1024/1024<101){//单个文件限制100M 12 app.filesArr.push(t_files[i]); 13 }else{ 14 var thisNames =t_files[i].name; 15 var thisSize =t_files[i].size/1024/1024+'MB'; 16 var msg ='存在超过100MB的单个文件!' 17 top.postMessage({func:'msg',data:{idNum:app.idnum,icon:'2',anim:'6',msg:msg}},"*"); 18 } 19 }; 20 //清空file 21 var file = document.getElementById("fileUP"); 22 // for IE, Opera, Safari, Chrome 23 if (file.outerHTML) { 24 file.outerHTML = file.outerHTML; 25 } else { // FF(包括3.5) 26 file.value = ""; 27 }; 28 //再次设置监听 29 fileAddEventListener(); 30 }, false);
1 var form = new FormData(); 2 3 for (var i = 0;i<app.filesArr.length; i++) { 4 // 文件名称,文件对象 5 form.append(app.filesArr[i].name, app.filesArr[i]); 6 }
1 $.ajax({ 2 //几个参数需要注意一下 3 type: "POST",//方法类型 4 dataType: "json",//预期服务器返回的数据类型 5 url: "../../insertFile.action" ,//url 6 //data: $('#form1').serialize(), 7 data:form, 8 // contentType:"multipart/form-data", 9 contentType: false, 10 processData: false, 11 async: false, 12 // cache: false, 13 success: function (json_data) { 14 // alert("恭喜你!上传成功"); 15 console.log(json_data); 16 name= json_data; 17 }, 18 error : function() { 19 //alert("异常!"); 20 name= ""; 21 } 22 });
页面提示:
默认状态:
选择1-4个文件时:
选择5个文件时:
文件名 file.name
文件大小file.size
文件批量下载方法
1 function downloadFunc(name, href) { 2 var a = document.createElement("a"), //创建a标签 3 e = document.createEvent("MouseEvents"); //创建鼠标事件对象 4 e.initEvent("click", false, false); //初始化事件对象 5 a.href = href; //设置下载地址 6 a.download = 'download'; //设置下载文件名 7 a.dispatchEvent(e); //给指定的元素,执行事件click事件 8 }; 9 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 10 for (let index = 0; index < hrefArr.length; index++) { 11 downloadFunc('第' + index + '个文件', hrefArr[index]); 12 } 13 } 14