Question

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

event.target.name ，返回'undefined'和 file.name ，返回所有其余图片的第1张图片的名称。任何帮助，将不胜感激。

<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);
    }
});

在jQuery

1 个答案: