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

最新推荐文章于 2024-05-06 13:33:37 发布

yixuan_1

最新推荐文章于 2024-05-06 13:33:37 发布

阅读量8.1k

点赞数 2

分类专栏：精通HTML5 文章标签： filelist标签 web前端 html5 对象

精通HTML5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

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

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

JavaScript

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

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

完整的代码

  
  <!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>W3Cfuns_FileList</title> 
        <script type="text/javascript"> 
        function showFileName() 
        { 
                        var file = document.getElementById("W3Cfuns_FileList"); 
                        for(var i = 0, j = file.files.length; i < j; i++) 
                        { 
                                     alert(file.files[i].name); 
                        } 
        } 
        </script> 
    </head> 
    
    <body> 
        <input id="W3Cfuns_FileList" type="file" multiple/> 
        <button onclick="showFileName();">提交</button> 
    </body> 
</html>

本文原地址：http://www.sitejs.cn/sitejs-12743-1.html

yixuan_1

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5教程之FileList文件列表对象的应用

HTML5教程之FileList文件列表对象的应用在过去，上传文件的时候，我们每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能，是轻而易举的事情。FileList对象：FileList对象，其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需要在原有的file类型的Inpu
复制链接

扫一扫