input上传文件个数控制

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>

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     }

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

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

input上传文件个数控制相关推荐

获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用首先文件的上传需要一个type=file的input.它的意义就是上 ...
[html] input上传文件可以同时选择多张吗？怎么设置？
[html] input上传文件可以同时选择多张吗?怎么设置? <input type="file" multiple /> 个人简介我是歌谣,欢迎和大家一起交流前后 ...
[html] input上传文件可以同时选择多张吗？怎么设置？
[html] input上传文件可以同时选择多张吗?怎么设置? <input type="file" multiple="multiple" value= ...
html文件上传数量限制,使用HTML中的input上传文件最多可以上传多少张？
问题描述我使用flask作为web框架搭建了一个小网站,在网站里我基于bootstrap-fileinput实现了文件上传的功能,在上传文件的时候发现最多只能上传1212张,但是我的需求是要能一次上 ...
JS实现限制input上传文件的大小和格式
场景在实现Excel导入数时,需要上传excel格式的文件. 在前端js进行判断,限制上传文件的大小和格式. 实现 html页面代码可以通过accept属性来筛选打开文件的格式. <form ...
js上传文件；input上传文件；
html原生上传文件方式1: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
IE9 input 上传文件
需要引用jquery.form.js <script type="text/javascript" src="jquery.form.js">< ...
如何上传html验证文件大小,input上传文件，前端判断文件的大小及类型
由于项目需朋不功事做时次功好来多这开制的请一例农在要,需要实现该功能纪录如下是能览调不页新代些事几求事都时学下是事. 上传文件时,接愿目的那前机专容图缩近上意对这些端制门由前端判断文件的大小及类型.举 ...

input上传文件个数控制

input上传文件个数控制相关推荐

最新文章

热门文章