HTML5多文件选择和FileList

HTML5 里面对于文件上传有了极大的增强，曾几何时，当我们需要实现一个多文件双传功能，必须一次指定多个input tyPE="file> ，如果要上传10个文件就必须指定10行，因为HTML4 里面，所有的input type="file> 只支持单个文件选择、
 
但是在HTML5里面，可以给input type="file"> 加上一个multiple属性，这样这个空间就直接支持多文件上传了.废话不多说，献上代码：
1. !DOCTYPE html>
2. head>
3. meta charset="UTF-8">
4. tITle> HTML5 对于多文件选择的增强Demo/title>
5. script type="text/javascript" src="js/fileops.js"> /script>
6. /head>
7. 
8. p> multiple文件选择 FileList Demo:/p>
9. 选择文件：
10. input type="file" id="multifile" multiple size="80"/>
11. input type="button" onclick="showFileName()" value="文件上传" />
 
当点击button时候，会触发showFileName()方法，这里将遍历所有被选择的文件，并且依次打印出它们的文件名：
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.COM)
5.  */
6.  
7.  function showFileName(){
8.     
9.     console.LOG(" FileList Demo:");
10.     VAR file;
11.     //取得FileList取得的file集合
12.     for(var i = 0 ; idocument.getElementById("multifile").files.length; i++){
13.         //file对象为用户选择的某一个文件
14.         file=document.getElementById("multifile").files[i];
15.         //此时取出这个文件进行处理，这里只是显示文件名
16.         console.log(file.name);
17.         
18.     }
19.  }
 
然后当点击“选择文件”按钮时，则会弹出一个对话框，让你选择，这时候，你可以按住Ctrl键并且点击鼠标左键点住你想要的文件，从而进行多文件选择。不少人都在这里搞不明白为什么不能选择多个文件。

HTML5 里面对于文件上传有了极大的增强，曾几何时，当我们需要实现一个多文件双传功能，必须一次指定多个input type="file> ，如果要上传10个文件就必须指定10行，因为HTML4 里面，所有的input type="file> 只支持单个文件选择、
 
但是在HTML5里面，可以给input type="file"> 加上一个multiple属性，这样这个空间就直接支持多文件上传了.废话不多说，献上代码：
1. !DOCTYPE html>
2. head>
3. meta charset="UTF-8">
4. title> HTML5 对于多文件选择的增强Demo/title>
5. script type="text/javascript" src="js/fileops.js"> /script>
6. /head>
7. 
8. p> multiple文件选择 FileList Demo:/p>
9. 选择文件：
10. input type="file" id="multifile" multiple size="80"/>
11. input type="button" onclick="showFileName()" value="文件上传" />
 
当点击button时候，会触发showFileName()方法，这里将遍历所有被选择的文件，并且依次打印出它们的文件名：
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  function showFileName(){
8.     
9.     console.log(" FileList Demo:");
10.     var file;
11.     //取得FileList取得的file集合
12.     for(var i = 0 ; idocument.getElementById("multifile").files.length; i++){
13.         //file对象为用户选择的某一个文件
14.         file=document.getElementById("multifile").files[i];
15.         //此时取出这个文件进行处理，这里只是显示文件名
16.         console.log(file.name);
17.         
18.     }
19.  }
 
然后当点击“选择文件”按钮时，则会弹出一个对话框，让你选择，这时候，你可以按住Ctrl键并且点击鼠标左键点住你想要的文件，从而进行多文件选择。不少人都在这里搞不明白为什么不能选择多个文件。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！