javascript - 如何将 $(this) 用于文件阅读器图像 src？

Question

我正在尝试预览所选照片，下面的代码有效，但是当我选择第二张照片时，第一张照片的 src 也会发生变化。我怎样才能拥有它，所以只有被附加的 previewPhoto 会改变它的 src？

    $(function(){
        $("#photo").change(showPreview);
    });
    function showPreview(e) {
        var $input = $(this);
        var inputFiles = this.files;
        if(inputFiles == undefined || inputFiles.length == 0) return;
        var inputFile = inputFiles[0];

        var reader = new FileReader();
        reader.onload = function(event) {
            $("<div class='preview'></div>").append("<img class='previewPhoto'/>").appendTo("#previewBox");
            $('.previewPhoto').attr('src', event.target.result);
        };
        reader.onerror = function(event) {
            alert("ERROR: " + event.target.error.code);
        };
        reader.readAsDataURL(inputFile);
    }

Answer 1

不要.previewPhoto用作选择器，否则你也会改变其他人。
您可以附加它，src如下所示。

$("<div class='preview'></div>")
    .append("<img class='previewPhoto' src='" + event.target.result + "'/>")
    .appendTo("#previewBox");

Answer 2

将对象缓存在变量中：

reader.onload = function(event) {
    var $previewPhoto = $("<img class='previewPhoto'/>");
    $("<div class='preview'></div>").append($previewPhoto).appendTo("#previewBox");
    $previewPhoto.attr('src', event.target.result);
};

这样，变量将保存一个指向实际对象的指针；而不是为它遍历 DOM。这也是使用 JQuery 选择器时性能的关键因素。