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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

东北农业大计算机排名,黑龙江高校排名更新,东北林大排名第3,东油排名第8...

东北地区的经济发展起步比较早&#xff0c;属于我国的老牌重工业基地&#xff0c;被称为“新中国工业的摇篮”&#xff0c;是我国最重要的经济支柱。这里的高校也因此而受到重视&#xff0c;为日后的发展奠定了扎实的基础&#xff1b;随着国家经济重心的转移&#xff0c;因为地…

150个Java面试问答-最终清单(PDF下载)

我们的Java面试问题和答案集合全都涉及可以在Java面试中使用的不同类型的问题&#xff0c;以使雇主可以测试您在Java和面向对象编程方面的技能。 在以下各节中&#xff0c;我们将讨论有关面向对象编程及其特性的Java面试问题&#xff0c;有关Java及其功能的一般问题&#xff0…

计算机电子电路原理图,简单电路图入门-电路原理图入门知识图解

简单电路图入门-电路原理图入门知识图解电路图的分类简单电路图入门&#xff0c;常遇到的电子电路图有原理图、方框图、装配图和印版图等。1、原理图原理图就是用来体现电子电路的工作原理的一种电路图&#xff0c;又被叫做“电原理图”。这种图由于它直接体现了电子电路的结构…

老是不中,算了算“双色球”和“3D”,全买到底要多少¥¥。。(C 代码)

最近也做发财梦&#xff0c;买了段时间得彩票&#xff0c;不得要领&#xff0c;今天写了两个小程序&#xff0c;算算把所有号码组合都买下到底要多少&#xffe5;&#xffe5;。。还是先贴个规则吧&#xff1b;双色球&#xff1a;从 1~33 中选6个不重复得数值&#xff08;红球&…

pycharm 中 import requests 报错

一 , 使用Pycharm来抓取网页的时候&#xff0c;要导入requests模块&#xff0c;但是在pycharm中 import requests 报错。 原因&#xff1a; python中还没有安装requests库 解决办法&#xff1a; 1.先找到自己python安装目录下的pip 2.在自己的电脑里打开cmd窗口。先点击开始栏&…

dell 计算机硬盘保护,dell台式机硬盘保护 怎样取消

工具/原料十字型螺丝刀一把新台式机硬盘一块方法/步骤1.把新购置的硬盘拆开&#xff0c;以备后面使用&#xff1a;2.拆下机箱的侧面板&#xff0c;注意&#xff0c;侧面板有两颗螺丝固定&#xff0c;需要先卸下&#xff0c;之后向一侧方向拉出侧面板就可以了&#xff0c;拆下侧…

安全建设之平台搭建

一、信息搜集类 基础信息 基础信息搜集包括ip&#xff0c;域名&#xff0c;端口&#xff0c;框架&#xff0c;组件信息。Ip、域名甲方可通过运维同事获取&#xff0c;其他获取方式仁者见仁智者见智。端口&#xff0c;需要我们根据获取的域名、ip进行端口扫描&#xff0c;这里推…

第四章 生命周期函数--35 vue-resource发起get、post、jsonp请求

vue-resource 官网 https://github.com/pagekit/vue-resource 1 <!DOCTYPE html>2 <html lang"en">3 4 <head>5 <meta charset"utf-8">6 <meta name"viewport" content"widthdevice-width,initial-sc…

Enterprise Library Step By Step系列(十一):异常处理应用程序块——入门篇

Enterprise Library Step By Step系列&#xff08;十一&#xff09;&#xff1a;异常处理应用程序块——入门篇 作者&#xff1a;Terrylee 一&#xff0e;概述 使开发人员和决策人员能够针对发生在企业应用程序体系结构层的异常处理创建一致的策略。它的实现方法如下&#xff1…

qt商业版和开源版的区别_微擎商业版系统V2.0.9全开源版纯净框架

微擎商业版系统V2.0.9全开源版纯净框架_全新界面无后门无任何限制。该源码不含任何安装模块&#xff0c;最重要的是该版本是一键安装版&#xff0c;主要你上传到服务器上&#xff0c;然后直接运行域名就会直接进入安装环境&#xff0c;不会像网络上的其他版本&#xff0c;还需要…

js 的起源故事

"1994年&#xff0c;网景公司&#xff08;Netscape&#xff09;发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器&#xff0c;轰动一时。但是&#xff0c;这个版本的浏览器只能用来浏览&#xff0c;不具备与访问者互动的能力。......网景公司急需一种网…

CMD命令也要用好

以前一些程序需要执行一些Dos命令&#xff0c;一般都是写成一个Bat文件&#xff0c;然后通过Shel来调用&#xff0c;实际上一些简单得用法完全可以这样用&#xff1a;VBA.Shell "cmd /c cmd /? > c:\cmdhelp.txt"VBA.Shell "cmd /c Type c:\cmdhelp.txt >…

广元南山隧道南河互通立交图_广元城区一隧道工程竣工时间已定,今后出行更加方便了!...

4月15日&#xff0c;伴着轰隆的机械声&#xff0c;记者踏入国道212线南山隧道工程项目建设现场&#xff0c;突然眼前飘来一阵细密小雨&#xff0c;抬头望去&#xff0c;原来是建设边坡上一排白色雾炮机正在进行降尘作业。记者看到&#xff0c;数控钢筋加工厂内工人们正抓紧预制…

Java EE 7:新增功能???

我有点“晚点”&#xff0c;可以这么说……就Java EE 7的 “博客”而言。 自2013年6月发布以来&#xff0c;已经差不多10个月了 &#xff0c;但是它仍然相对较新。 就我个人而言&#xff0c;仅仅是因为它的易用性和所购买的功能范围之广&#xff0c;我对此感到很兴奋。但是&…

浏览器的同源策略及跨域解决方案

同源策略 一个源的定义 如果两个页面的协议&#xff0c;端口&#xff08;如果有指定&#xff09;和域名都相同&#xff0c;则两个页面具有相同的源。 举个例子&#xff1a; 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL结果原因http://a.xyz.com/dir2/ot…

计算机病毒及其防治评课,区初中信息技术教研活动公开课评课感想

今天上午&#xff0c;在我校成功举行了区初中信息技术教研活动&#xff0c;总共开设了三节课&#xff0c;都是由我校老师执教的。听后受益匪浅&#xff0c;感受颇深&#xff0c;以下是本人的评课感想。一、首先说一下三位老师的共同点&#xff1a;1、三位老师都用了导学案&…

Django—路由层,视图层

路由层urls 浏览器会自动给url后加一个“/” django会自动给路由的正则表达式前面加一个“/” django会给任何不带“/”结尾的url语句添加“/”&#xff08;可设置&#xff09; 短路路由规则&#xff1a;匹配到第一条就忽略后面所有&#xff01; 所以路由顺序很重要&#xff01…

分数怎么化成带分数_人教版五年级下册第4单元带分数及把假分数化成整数或带分数教学视频+知识点...

|点击题目下方蓝字一键关注 小学生知识库|【教学视频】分数的分类与互化【知识点】带分数的意义和特征&#xff1a;像…这样由整数和真分数合成的数叫做带分数。假分数化成整数或带分数的方法是什么&#xff1f;①当假分数的分子是分母的倍数时&#xff0c;这个假分数可以化成整…

Java 8功能教程– ULTIMATE指南(PDF下载)

编者注&#xff1a;在本文中&#xff0c;我们提供了全面的Java 8功能教程。 自Java 8公开发布以来已经有一段时间了&#xff0c;所有迹象都表明这是一个非常重要的版本。 我们在Java Code Geeks处提供了大量教程&#xff0c;例如“ 玩Java 8 – Lambda和并发” &#xff0c;“…

盆景

dvbbs收藏本页联系我们论坛帮助dvbbs恢复默认设置登录注册 搜索风格论坛状态论坛展区道具中心我能做什么 >> 优秀作品欣赏、个人作品展示。(The excellent work enjoys, personal work demonstration) 搜一搜相关精彩主题 盆景艺术在线论坛 → 盆景论坛(penjing Forum) →…