qinyi素材网
当前位置: 首页 > WEB教程 > 使用jQuery获取上传文件的名称、大小等信息

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

  时间: 2021-11-22   阅读:795
简要教程

我们可以使用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);
    }
});
上一篇: 下一篇: