Jq获取上传文件的名称类型及大小

Jq获取上传文件的名称类型及大小

博主头像
2022-06-28 / 0 评论 / 527 阅读 / 正在检测是否收录...

上传多个文件需添加multiple属性:

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

先检测文件的数量通过循环来分别获取每个文件的详细信息:

<script>
    $("#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);
        }
    });
</script>
19
打赏

评论 (0)

取消