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选择器时性能的关键因素。

如何使用$（this）文件读取器图像src？

2 个答案: