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

 

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

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <head> 
    3. 
    
    
    
    
  3. <meta charset="UTF-8"> 
    4. 
    
    
    
    
  4. <title>HTML5 对于多文件选择的增强Demotitle> 
    5. 
    
    
    
    
  5. <script type="text/javascript" src="js/fileops.js">script> 
    6. 
    
    
    
    
  6. head> 
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8. <p>multiple文件选择 FileList Demo:p> 
    9. 
    
    
    
    
  9. 选择文件： 
    10. 
    
    
    
    
  10. <input type="file" id="multifile" multiple size="80"/> 
    11. 
    
    
    
    
  11. <input type="button" onclick="showFileName()" value="文件上传" /> 
    12.

 

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

   
   
   
   
    
    
    
    
    
  1. /** 
    2. 
    
    
    
    
  2.  *  This file is confidential by Charles.Wang 
    3. 
    
    
    
    
  3.  *  Copyright belongs to Charles.wang 
    4. 
    
    
    
    
  4.  *  You can make contact with Charles.Wang ([email protected]) 
    5. 
    
    
    
    
  5.  */ 
    6. 
    
    
    
    
  6.   
    7. 
    
    
    
    
  7.  function showFileName(){ 
    8. 
    
    
    
    
  8.      
    9. 
    
    
    
    
  9.     console.log(" FileList Demo:"); 
    10. 
    
    
    
    
  10.     var file; 
    11. 
    
    
    
    
  11.     //取得FileList取得的file集合 
    12. 
    
    
    
    
  12.     for(var i = 0 ;i"multifile").files.length;i++){ 
    13. 
    
    
    
    
  13.         //file对象为用户选择的某一个文件 
    14. 
    
    
    
    
  14.         file=document.getElementById("multifile").files[i]; 
    15. 
    
    
    
    
  15.         //此时取出这个文件进行处理，这里只是显示文件名 
    16. 
    
    
    
    
  16.         console.log(file.name); 
    17. 
    
    
    
    
  17.          
    18. 
    
    
    
    
  18.     } 
    19. 
    
    
    
    
  19.  } 
    20.

 

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

HTML5 多文件选择和FileList_第1张图片

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

 

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

 

HTML5 多文件选择和FileList_第2张图片