input上传文件个数控制

发布时间:2024-11-30 11:19

如何用数据线传输U盘文件 #生活技巧# #数码产品使用技巧# #3C配件维护#

最新推荐文章于 2024-06-05 16:27:31 发布

前端老码农 于 2019-10-09 11:07:02 发布

HTML:

1 <h3>请上传[2,5]个文件</h3> 2 <form action="" enctype="multipart/form-data"> 3 <input type="file" name="file" multiple="multiple" id="file" onchange="fileCountCheck(this,2,5)" /> 4 </form>123

JavaScript:

1 /** 2 * [fileCountCheck 上传文件数量检测] 3 * @param {[Object]} filesObj [文件对象] 4 * @param {[Number]} minFileNum [文件数量下限] 5 * @param {[Number]} maxFileNum [文件数量上限] 6 * @return {[Boolean]} [真假] 7 */ 8 function fileCountCheck(filesObj, minFileNum, maxFileNum) { 9 10 // console.log(filesObj.files); // 文件对象 11 12 if (window.File && window.FileList) { 13 14 var fileCount = filesObj.files.length; 15 16 if (fileCount < minFileNum || fileCount > maxFileNum) { 17 18 // 不符合数量的处理 19 window.alert('文件数不能小于' minFileNum '个,也不能超过' maxFileNum '个,你选择了' fileCount '个'); 20 21 return false; 22 23 } else { 24 25 // 符合数量的处理 26 window.alert('符合规定'); 27 28 return true; 29 30 } 31 32 } else { 33 34 // 不支持FileAPI 35 window.alert('抱歉,你的浏览器不支持FileAPI,请升级浏览器!'); 36 37 return false; 38 39 } 40 41 }

12345678910111213141516171819202122232425262728293031323334353637383940

除此之外,还能控制文件的大小或是文件格式等。

更多专业前端知识,请上 【猿2048】www.mk2048.com

网址:input上传文件个数控制 https://www.yuejiaxmz.com/news/view/323130

相关内容

input的type为file时,判断上传文件的类型和大小
HTML5的 input:file上传类型控制
input file 上传图片并实现实时预览
input的type=file上传图片简单使用
微信小程序常用控件汇总
input标签的type为select、radio、checkbox的使用
巧用两个type=range input实现区域范围选择 « 张鑫旭
[DOM] Input elements should have autocomplete attributes (suggested: 'current
vue中 input type=date组件封装及调用
远程控制软件哪个好用?五款好用的远程控制软件分享

随便看看