mozilla
您的搜索结果

    FileList

    一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.

    Gecko 1.9.2 note
    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    在Gecko 1.9.2之前,通过input元素,每次只能选择一个文件,这意味着该input元素的files属性上的FileList对象只能包含一个文件.从Gecko 1.9.2开始,如果一个input元素拥有multiple属性,则可以用它来选择多个文件.

    使用FileList

    所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:

    <input id="fileItem" type="file">
    

    下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):

    var file = document.getElementById('fileItem').files[0];

    方法概述

    File item(index);

    Edit属性

    属性名 类型 描述
    length integer 一个只读的整数值,用来返回该FileList对象中的文件数量

    方法

    Edititem()

    根据给定的索引值.返回FileList对象中对应的File对象.

     File item(
       index
     );
    
    Edit参数
    index
    File对象在FileList对象中的索引值,从0开始.
    Edit返回值

    所请求File对象.

    例子

    这个例子迭代了用户通过一个input元素选择的多个文件:

    // fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple>
    var fileInput = document.getElementById("myfileinput");
    
    // files 是一个 FileList 对象(类似于NodeList对象)
    var files = fileInput.files;
    var file;
    
    //遍历所有文件
    for (var i = 0; i < files.length; i++) {
    
        // 取得一个文件
        file = files.item(i);
        // 这样也行
        file = files[i];
        // 取得文件名
        alert(file.name);
    }
    

    下面是一个更完整的例子.

    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
    // multiple属性可以让用户能选择多个文件
    
    <input id="myfiles" multiple type="file">
    
    </body>
    
    <script>
    
    var pullfiles=function(){ 
        // 获取到input元素
        var fileInput = document.querySelector("#myfiles");
        var files = fileInput.files;
        // 获取到所选文件数量 
        var fl=files.length;
        var i=0;
    
        while ( i < fl) {
            var file = files[i];
            alert(file.name);
            i++;
        }    
    }
    
    // 设置change事件处理函数
    document.querySelector("#myfiles").onchange=pullfiles;
    
    </script>
    
    </html>

    规范

    相关链接

    文档标签和贡献者

    标签: 
    此页面的贡献者有: ziyunfei, james.li, teoli
    最后编辑者: teoli,