如何使用 jQuery 显示多个文件属性

How to display multiple files properties using jQuery?

本文关键字：文件属性显示何使用 jQuery 更新时间：2023-09-26

我正在尝试使用jQuery显示多个上传文件的详细信息。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Multi File Upload</title>
</head>
<body>
       <form id="file_upload" action="" method="get" enctype="multipart/form-data">
            <p><input type="file" name="file_1" class="uploadFile"></p>
            <p>
                <input type="submit" value="Upload" id="btnSubmit">
                <a id="add_more" href="#">Add more</a>
            </p>
       </form>                                                      
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
       <script>
           $(document).ready(function(){
                $("#add_more").click(function(){
                    var current_count = $("input[type='file']").length;
                    var next_count = current_count + 1;
                    $("#file_upload").prepend('<p><input type="file" name="file_'+next_count+'" class="uploadFile" /></p>');
                });
                $("#btnSubmit").click(function(e){
                    e.preventDefault(); 
                    var file_count = $(".uploadFile").length;
                    var file_arr = [];
                    for (var i = 0; i < file_count; i++){
                        // file_arr[i] = $(".uploadFile")[i].files[i];
                        file_arr[i] = $(".uploadFile").prop('files')[i];
                        alert(file_arr[i].name);
                        alert(file_arr[i].size);
                        alert(file_arr[i].type);
                    }
                });
           });
       </script>
</body>
</html>

但问题是它正确显示了第一个上传文件的详细信息，并为我提供了第二个文件的错误Uncaught TypeError: Cannot read property 'name' of undefined。

$("#btnSubmit").on('click', function () {
 
    var fp = $(".uploadFile");
    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);
    }
});