HTML5 多文件选择和FileList
HTML5 里面对于文件上传有了极大的增强，曾几何时，当我们需要实现一个多文件双传功能，必须一次指定多个<input type="file>，如果要上传10个文件就必须指定10行，因为HTML4 里面，所有的<input type="file>只支持单个文件选择、
但是在HTML5里面，可以给<input type="file"> 加上一个multiple属性，这样这个空间就直接支持多文件上传了.废话不多说，献上代码：
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5 对于多文件选择的增强Demo</title>
- <script type="text/javascript" src="js/fileops.js"></script>
- </head>
- <p>multiple文件选择 FileList Demo:</p>
- 选择文件：
- <input type="file" id="multifile" multiple size="80"/>
- <input type="button" onclick="showFileName()" value="文件上传" />
当点击button时候，会触发showFileName()方法，这里将遍历所有被选择的文件，并且依次打印出它们的文件名：
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang ([email protected])
- */
- function showFileName(){
- console.log(" FileList Demo:");
- var file;
- //取得FileList取得的file集合
- for(var i = 0 ;i<document.getElementById("multifile").files.length;i++){
- //file对象为用户选择的某一个文件
- file=document.getElementById("multifile").files[i];
- //此时取出这个文件进行处理，这里只是显示文件名
- console.log(file.name);
- }
- }
然后当点击“选择文件”按钮时，则会弹出一个对话框，让你选择，这时候，你可以按住Ctrl键并且点击鼠标左键点住你想要的文件，从而进行多文件选择。不少人都在这里搞不明白为什么不能选择多个文件。
选中之后，点"打开”，则<input>输入框中会提示你已经选择了多少个文件：
最后，点击“文件上传”按钮，则会触发这段JS代码的最终执行，它用FileList进行遍历所有被选择的文件，然后依次在浏览器控制台打印出文件名，于是，控制台输出如图：
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15