设为首页 加入收藏

TOP

HTML5 多文件选择和FileList
2014-11-24 12:53:55 来源: 作者: 【 】 浏览:0
Tags:HTML5 文件 选择 FileList

HTML5 里面对于文件上传有了极大的增强,曾几何时,当我们需要实现一个多文件双传功能,必须一次指定多个只支持单个文件选择、


但是在HTML5里面,可以给 加上一个multiple属性,这样这个空间就直接支持多文件上传了.废话不多说,献上代码:



当点击button时候,会触发showFileName()方法,这里将遍历所有被选择的文件,并且依次打印出它们的文件名:



然后当点击“选择文件”按钮时,则会弹出一个对话框,让你选择,这时候,你可以按住Ctrl键并且点击鼠标左键点住你想要的文件,从而进行多文件选择。不少人都在这里搞不明白为什么不能选择多个文件。



选中之后,点"打开”,则输入框中会提示你已经选择了多少个文件:




最后,点击“文件上传”按钮,则会触发这段JS代码的最终执行,它用FileList进行遍历所有被选择的文件,然后依次在浏览器控制台打印出文件名,于是,控制台输出如图:




】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇HTML5 利用Canvas API 组合图形 下一篇HTML5 Canvas 画图

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·C语言中如何将结构体 (2025-12-24 22:20:09)
·纯C语言结构体成员变 (2025-12-24 22:20:06)
·C语言中,指针函数和 (2025-12-24 22:20:03)
·哈希表 - 菜鸟教程 (2025-12-24 20:18:55)
·MySQL存储引擎InnoDB (2025-12-24 20:18:53)