在jQuery中上传多个图像之前无法打印文件名

Question

我正在尝试在上传之前获取图像预览及其名称。但无法为每张图片打印正确的名称。我试过了

event.target.name 返回“未定义”，file.name 返回所有其余图像的第一张图像的名称。任何帮助，将不胜感激。

<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple>
<div id="img-wrapper"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type="text/javascript">
    $("#image-upload").change(function(){            
        var files = $(this)[0].files;

        for(var i = 0; i< files.length; i++) {
            var file = files[i];                
            var reader = new FileReader();                
            reader.onload = function(event){                    
                var img = event.target.result;

                console.log(event.target.name);   //prints 'undefined'
                console.log(file.name);           //prints 1st image's name for all images

                $('#img-wrapper').append("<img class='thumbnail' src='" + img + "'" +
                        "title='" + file.name + "'/>"); 

            };

            reader.readAsDataURL(file);
        }                               

    });
</script>

Answer 1

event.target.name 未定义，因为事件的目标是FileReader 对象，而不是文件：

EXAMPLE

$("#image-upload").change(function() {
    $("#img-wrapper").empty();
    var files = $(this)[0].files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();

        // Give the reader a name
        reader.name = 'Reader #' + i;

        reader.onload = function(event) {
            // Append the reader's name to the output
            $("#img-wrapper").append('<div>' + event.target.name + '<div>');
        };
    };

    reader.readAsDataURL(file);
});

关于您的文件名问题，FileReader 是异步的。 From MDN:

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

这意味着您的 for 循环在触发 onload 回调之前完成了所有迭代，file 将始终代表循环中看到的最后一项。当onload 函数被触发时，它们都具有正确的结果（图像），因为您正在使用事件对象，但它们都将使用相同的file。

EXAMPLE

$("#image-upload").change(function(){            
    var files = $(this)[0].files;

    for(var i = 0; i< files.length; i++) {
        var file = files[i];
        var reader = new FileReader();

        reader.name = 'Reader #'
        reader._i = i;

        $('#img-wrapper').append("<div>LOOP #" + i + "</div>");

        reader.onload = function(event) {
            var img = event.target.result;
            $('#img-wrapper').append("<div>READER #" + this._i +"</div>"); 

        };

        reader.readAsDataURL(file);
    }                               

});

你将不得不重组你的代码才能做你想做的事情。

再想一想，您可能不需要对任何东西进行太多重组。您可以为每个阅读器绑定onload 函数并传入文件名：

EXAMPLE

$("#image-upload").change(function() {
    var files = $(this)[0].files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();

        // Note that parameters are reordered due to binding below
        reader.onload = (function(name, event) {
        var img = event.target.result;
        $('#img-wrapper').append(
            "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>");
        }).bind(reader, file.name);

        reader.readAsDataURL(file);
    }
});