Home > Web Front-end > H5 Tutorial > HTML5每日一练之FileList文件列表对象的应用

HTML5每日一练之FileList文件列表对象的应用

WBOY
Release: 2016-05-17 09:09:17
Original
1719 people have browsed it

在过去,上传文件的时候,我们每次都只能一次选择一个文件。如果想实现多文件上传,要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能,是轻而易举的事情。

FileList对象:
FileList对象,其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需要在原有的file类型的Input中加入multple属性即可。

HTML





JavaScript
为了能够让大家看清楚这个上传文本框,简单的写了一下JS,通过它来遍历出filelist中的文件,JS看不懂的话也没有关系,在这里主要是为了演示此控件的确获取了多个文件。
  • function showFileName()
  • {
  •         var file = document.getElementById("W3Cfuns_FileList");
  •         for(var i = 0, j = file.files.length; i
  •         {
  •                alert(file.files.name);
  •         }
  • }



完整的代码

  •    
  •         
  •         W3Cfuns_FileList
  •         
  •         function showFileName()
  •         {
  •                         var file = document.getElementById("W3Cfuns_FileList");
  •                         for(var i = 0, j = file.files.length; i
  •                         {
  •                                      alert(file.files.name);
  •                         }
  •         }
  •         
  •    

  •    
  •         
  •         
  •    




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template