html5中的file控件支持多文件选择上传

最新推荐文章于 2025-10-28 13:27:20 发布
原创 最新推荐文章于 2025-10-28 13:27:20 发布 · 3.2w 阅读 · 7 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
html5

当前文章被收录于：

html5
3 篇文章 0 人学习
订阅专栏 查看详情
这篇博客介绍了HTML5中file控件的多文件选择上传功能，通过`<input type='file' multiple=true>`实现。相比基于flash的uploadify和iframe方案，HTML5的实现更为简单，并且支持拖拽选择文件。文章提供了相关资源链接，包括HTML5上传控件的新特性介绍、多文件上传demo以及后台Java处理多个文件上传的代码示例。


在前两天的博文中刚介绍了一款基于jquery的多文件上传控件uploadify，原理是基于flash达到上传效果的

另外，还有一种基于隐藏iframe来实现多文件上传的方法（iframe中放一个form）。
例如：http://hi.baidu.com/yunanwu/item/c38ab756b93d593832e0a923。

但是其实在Html5中，file控件已经支持多文件选择了。

file控件元素支持多文件选择，其隐藏的玄机就是下面代码中大红高亮的部分：

<input id="fileImage" type="file" size="30" name="fileselect[]" multiple=true />

如果项目可以规定浏览器是firefox的话，用html应该就问题不大了，而且实现也比较简单，
另外，在html5中，文件也能够被拖拽选择上传了。

html5下的上传控件的新特性
http://www.w3.org/TR/html-markup/input.file.html

html5缩略图多文件上传demo
http://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html

 

后台java获取多个文件上传代码
http://www.ssjyblog.com/post/xheditor-java-upload-html5-applicationoctetstream.html

淘宝电商产品价格官方防爬取采集设计机制，如何破？|淘宝电商API数据采集看完你也会！
TinagirlAPI的博客
03-11 1347
然而，随着电子商务的蓬勃发展，涌现出大量的第三方工具和应用，试图通过采集淘宝电商产品价格等信息来进行数据分析和竞争优势的获取。为了维护市场秩序和保护商家权益，淘宝采取了一系列的防爬取设计机制，以阻止非授权的数据采集行为。为了确保数据的准确性和及时性，淘宝采取了多层次的防爬取机制，以限制未经授权的数据采集。其它的情况，比如淘宝首页、淘宝关键词商品搜索结果页面、商品详情页面，都是正常展示，未实现加密；也可以使用【tesseract ocr识别】指令，这个是免费无限使用的；【淘宝商品搜索结果页面-本地截图】
手把手教你搭建一个属于自己的网站-适合零基础小白，文末附网站模板
qq_46788925的博客
08-23 1万+
手把手教你搭建一个属于自己的网站-适合零基础小白写在前面搭建需求功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 写在前面 前段时间休息想着搭一个属于自己的网站，几经尝试终于成功了，网上其实有很多教程，但很多，希望这篇文章能够帮助到
HTML - input type=file 允许用户选择多个文件
qq_29761395的博客
09-22 3296
允许用户选择多个文件
HTML5图片上传功能实现与进阶
weixin_42577735的博客
07-21 869
HTML5 File API为前端开发者提供了一种全新的方式来处理用户在网页上上传的文件。它的核心优势在于，能够无需借助Flash或者Java Applet等插件即可实现复杂的文件操作。这一章，我们将从基础的File API开始，逐步深入到文件的读取、上传以及进度监控等高级功能。
input file实现多选和限制文件上传类型
lwj734114646的专栏
10-24 2万+
<!-- accept 并未真正的实现限制上传文件类型，只是在选文件的时候有限制， 如果选文件的时候手动修改上传文件的类型，还是可以上传其他文件的。 因此，要实现只上传accept属性指定的文件类型，还必修结合js来实现--> //取出上传文件格式的后缀名 var fileAccept = $("#id").val().split(".")[1];//获取上传文件的
html中实现多文件选择器
qq_32216775的博客
11-07 8328
html中有一个对于文件选择器的支持控件——file输入项。 我们可以通过以下代码创建一个文件选择器，方便的通过浏览器选择本地文件: 效果图如下： 但是，这种文件选择器的一个缺点就是一次只能选择一个文件，这对于需要一次性上传多个文件甚至数目不确定的文件无能为力，但是file输入项有一个属性可以将单文件选择器变为多文件选择器:multiple 只要在file的输入项中
input type=‘file’设置可以多选文件
6块腹肌的博客
11-05 8417
很简单，加上multiple属性即可 <input type="file" multiple >
HTML input type=file文件 选择表单元素 图片上传等等
cc的博客
12-14 8072
一、- input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下： <input type=file> 但是，为了习惯，我们多写成： <input type="file"> 在HTML5出现之前(XHTML)，我们的闭合规则则有些出入： <input type="file"...
使用HTML5实现多文件上传
CLolita的专栏
01-30 1355
入门 File input之所以叫file input是因为它是一个标准的input元素，且其type属性被设置为"file"。很多年以来，file input一次只能选择并上传单个文件。在新的HTML5规范中为input元素添加了多选模式。当然，不同浏览器对于规范的实现一直以来都不尽相同。比如，Firefox3.6和WebKit以及Firefox4.0就不同。或许你已经猜到了，IE并没有实现H
HTML5开发之通过文件对象选择文件
ccnanxi的博客
11-14 2816
在HTML中新增了两个与表单相关的API——文件API与拖放API。拖放API可以实现一些有趣的功能，允许用户拖放选项并将其放置到浏览器中的任何地方。其很好地体现了HTML5作为web应用程序规范的思路，使得开发者可以从桌面计算机中借用更多功能。      在HTML5里，从Web网页上访问本地文件系统变得十分简单，那就是使用文件API。这个file规范里提供了一个API来表现Web应用里的
html5 file api
02-21 917
在做web文件上传时，如果是单文件上传，我们一般可以采用form表单的形式来上传文件。 这种做法用户体验非常的差，我们无法在客户端对用户选取的文件进行validate，无法读取文件大小，无法判断文件类型，无法预览等。。。 如果是多文件上传，js更是回天乏力，虽然也不是不能用js + iframe来模拟，但是很麻烦。。。 但现在有了html5，一切都不同！ html5提供了F
HTML5之File API（一）
热门推荐
zhu1988renhui的专栏
09-03 2万+
转载于：http://hushicai.sinaapp.com/blog/post/24点击打开链接 【关于这个话题，网上已经有很多精华博客，发表博文，记录所学，扫盲的，仅供参考，转载请注明来源。】          在做web文件上传时，如果是单文件上传，我们一般可以采用form表单的形式来上传文件。 这种做法用户体验非常的差，我们无法在客户端对用户选取的文件进行validate，
html页面多个file控件,一个页面多个文件上传控件实现方法
weixin_29830873的博客
06-04 1079
方法实现如下：对ajaxFileUpload.js插件进行修改以实现多文件上传。步骤：(该方法来自：http://www.cnblogs.com/wiseblog/articles/5913579.html，但我在操作过程中遇到问题)一、修改源码，(源码只支持单个文件的上传)：在ajaxFileUpload.js插件里找到如下代码，进行修改://修改前代码-------//varoldEleme...
基于ASP与Flash的多文件上传控件源码解析与实践
最新发布
weixin_42510201的博客
10-28 451
ActionScript 3.0的事件模型遵循观察者模式（Observer Pattern），通过接口实现事件注册、广播与冒泡机制。几乎所有可视对象都继承自，天然支持事件监听。关键在于理解事件流的三个阶段：捕获、目标、冒泡。对于上传控件而言，常利用事件链传递状态变更信息。然而标准事件类型（如）无法携带业务数据，因此需要创建自定义事件类。例如，在文件添加到队列后，应通知进度条更新、列表刷新等多个组件：参数说明：FILE_ADDED。
Input file上传文件样式支持html5的浏览器兼容解决办法
akm55593的博客
11-04 287
Input file上传文件样式支持html5的浏览器兼容解决办法： 最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。下面是file上传控件在IE10，firefox16，chrome22,opera12,safa...
html input type=file
u010662647的博客
03-14 1万+
一、 input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：&lt;input type=file&gt;但是，为了习惯，我们多写成：&lt;input type="file"&gt;在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：&lt;input type="file" /&gt;顾名思...
input【file】限制上传图片数量
qq_38184559的博客
08-04 2万+
正常的就是选择单个文件的而在html5中新增的mutiple属性才可以多选            最多只能添加三张图片       //下面用于多图片上传预览功能     function setImagePreviews(avalue) {         var docObj = document.getElementById("files");  
File控件选择图片的时候在Html5下马上预览
angyi6424的博客
12-17 157
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;height:200px;" /> <form id="form_photo" method="post" action="/N/SavePhoto?id=1"> ...
2014图书管理系统单机版（完美破解，无功能，时间限制）
里诺2014图书管理系统单机版（完美破解，无功能，时间限制）
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值