使用jQuery获取上传文件的名称、大小等信息

我们可以使用jQuery在文件还未上传之前，获取文件的名称、大小、类别的信息。
在用户使用<input type=’file’>标签上传文件时，我们可以使用HTML5 File API提供的安全方式获取信息。
files集合中包含一组File对象，每个File对象对应着一个文件。每个文件都有下列的只读属性：
    name：本地文件系统中的文件名。
    size：文件的字节数。
    type：文件的MIME类型。
    lastModifiedDate：文件上一次被修改的时间。

支持File API的浏览器有IE10+，Firefox4+，Safari5.0.5+，Opera11.1+和Chrome。

效果展示

步骤一、选择单个文件或者多个文件
步骤二、点击“点击显示上传文件的详细信息”按钮查看文件的名称、大小、类型的信息

点击显示上传文件的详细信息

HTML结构

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<button id="btnShow">点击显示上传文件的详细信息</button>

javascript代码

$("#btnShow").on('click', function () {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0].files.length; // get length
    var items = fp[0].files;
    var fragment = "";

    if (lg > 0) {
        for (var i = 0; i < lg; i++) {
            var fileName = items[i].name; // get file name
            var fileSize = items[i].size; // get file size 
            var fileType = items[i].type; // get file type

            // append li to UL tag to display File info
            fragment += "name："+fileName+"；size："+fileSize+"bytes；Type："+fileType;
        }

        $("#ulList").append(fragment);
    }
});