用 jquery 获取上传文件的大小、类型和名称

在文件上传到服务器之前，我们可以通过 jquery 来获取上传文件的名称，类型和尺寸大小。

通常情况下，当用户通过 <input type=’file’> 标签来上传文件时，我们可以看到上传文件的名称。HTML5 File API 为我们提供了一种安全的方式，让我们在客户端访问计算机中的文件，并更好的对这些文件执行操作。

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

File API 在表单的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。HTML5 在 DOM 中为文件输入元素添加了一个 files 集合。通过文件输入字段选择了一个或多个文件时，files 集合中包含一组 File 对象，每个 File 对象对应着一个文件。

每个文件都有下列的只读属性：

• name：本地文件系统中的文件名。
• size：文件的字节数。
• type：文件的 MIME 类型。
• lastModifiedDate：文件上一次被修改的时间。
  通过这个 files 接口，我们就可以在 jquery 中获取上传文件的名称，类型和尺寸大小。通过下面的 demo 来体验一下效果。

1、通过 “选择文件” 按钮来选择要上传的文件，可以选择多个文件。

2、选择文件后点击 “显示上传文件的详细信息” 按钮来查看文件的详细信息。

点此查看演示效果

要同时上传多个文件，需要在文件上传标签中添加 multiple 属性。

上面 demo 的 HTML 结构如下：

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

在 jquery 代码中，首先检测被选择文件的数量，然后通过一个循环来分别获取每个文件的详细信息。

完整的 jquery 代码如下：

$("#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 += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
        }
 
        $("#ulList").append(fragment);
    }
});