HTML5教程之FileList文件列表对象的应用

在过去,上传文件的时候,我们每次都只能一次选择一个文件。如果想实现多文件上传,要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能,是轻而易举的事情。
FileList对象:
FileList对象,其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需要在原有的file类型的Input中加入multple属性即可。

  1. <input id="W3Cfuns_FileList" type="file" multiple/> 

JavaScript

为了能够让大家看清楚这个上传文本框,简单的写了一下JS,通过它来遍历出filelist中的文件,JS看不懂的话也没有关系,在这里主要是为了演示此控件的确获取了多个文件。

  1. function showFileName() 
  2.         var file = document.getElementById("W3Cfuns_FileList"); 
  3.         for(var i = 0, j = file.files.length; i < j; i++) 
  4.         { 
  5.                alert(file.files[i].name); 
  6.         } 

完整的代码

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.         <title>W3Cfuns_FileList</title> 
  6.         <script type="text/javascript"> 
  7.         function showFileName() 
  8.         { 
  9.                         var file = document.getElementById("W3Cfuns_FileList"); 
  10.                         for(var i = 0j = file.files.length; i < j; i++) 
  11.                         { 
  12.                                      alert(file.files[i].name); 
  13.                         } 
  14.         } 
  15.         </script> 
  16.     </head> 
  17.     
  18.     <body> 
  19.         <input id="W3Cfuns_FileList" type="file" multiple/> 
  20.         <button onclick="showFileName();">提交</button> 
  21.     </body> 
  22. </html> 

转载请注明:代码家园 » HTML5教程之FileList文件列表对象的应用

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)