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

我想要得到所选照片和下面的代码的预览，但是当我选择第二张照片时，第一张照片的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); 
    }

来源

2013-08-20 user2127833

请勿使用.previewPhoto作为选择器，否则您也会更改其他人。
您可以像下面一样附加它的src。

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

来源

2013-08-20 18:03:24

缓存在可变对象：

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

来源

2013-08-20 18:03:06

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

回答

相关问题