<div class="container">

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

    <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />

    <h4>

        选择文件如下:

    </h4>

</div>

//选择的文件对象 属性说明

// File对象

//lastModified: 1472428204742   //这个属性只在FF，Google中出现，在IE中不存在

//lastModifiedDate: Mon Aug 29 2016 07:50:04 GMT+0800 (中国标准时间) //文件最后修改时间

//name: "2016-08-29_075003.png" //文件名称

//size: 40278                   //文件大小 ，单位字节

//type: "image/png"             //文件的MIME类型，如果不识别为空字符串（例如:*.sql,*.mdf）

var fileBox = document.getElementById('file');

function showFiles() {

    //获取选择文件的数组

    var fileList = fileBox.files;

    console.info(fileList);

    for (var i = 0; i < fileList.length; i++) {

        var file = fileList[i];

        appendFile(file);

    }

}

function appendFile(file) {

    var block = $('<blockquote />');

    block.append('文件名：' + file.name);

    block.append('<br />');

    block.append('文件类型：' + file.type);

    block.append('<br />');

    block.append('文件大小：' + file.size);

    $('.container').append(block);

}

从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1),开始,File对象继承了Blob接口,Blob接口提供了一些能够获取到更多文件信息的属性和方法.

从Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始,在特权代码(比如扩展中的代码)中,可以将一个nsIFile对象传入File构造函数,从而生成一个File对象.

从Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)开始,在XPCOM组件代码中,你可以直接使用new File来创建一个 File对象,而不需要像以前那样必须实例化一个nsIDOMFile对象.