Question

我有一张背景照片-单击后，您可以选择一张新照片并更改当前照片，效果很好：

  <div class="uploader">
                           <div class="imagePreview" id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);"> </div>
                           <input type="file" id="imageUpload">
    </div>

// JS

function readURL(input) {
   if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function(e) {
           $('#imagePreview').css('background-image', 'url('+e.target.result +')');
           $('#imagePreview').hide();
           $('#imagePreview').fadeIn(850);
       }
       reader.readAsDataURL(input.files[0]);
   }
}
$("#imageUpload").change(function() {
   readURL(this);
});

这可能是基本的要求，但是现在我想复制此div以拥有4张具有相同效果的不同照片（单击以从每个div中选择新照片））我需要复制此JS代码。

如何编写此JS来监听重复div之一中every的变化，然后传递当前变化的imagePrivew的参数，并将其背景设置为所选文件？

Answer 1

我用不同的标记，然后用 JS 标记：

function readURL(input,id) {
   if (input.files && input.files[0]) {
       var reader = new FileReader();
       reader.onload = function(e) {

         var div = document.getElementById( id );
           $(div).css('background-image', 'url('+e.target.result +')');
           $(div).hide();
           $(div).fadeIn(850);



       }
       reader.readAsDataURL(input.files[0]);
   }
}
$("#imageUpload1,#imageUpload2,#imageUpload3,#imageUpload4").change(function() {
  var id = $(this).parent().attr('id');
   readURL(this,id);
});

更改所选背景照片

1 个答案: