Question

当我上传图片时，它会在div中预览图片。我已经完成了。但我想上传多张图片。

当我尝试上传图片时，会在多个地方进行预览。

我想在image1容器中上传和预览image1，并且在图像2容器中上传和预览图像2时。

这是jsfiddle。我试图使用.closest但无济于事 https://jsfiddle.net/a49cL7m3/1/

  $(document).ready(function() {
  function readURL(input) {
  if (input.files && input.files[0]) {
  var reader = new FileReader();

  reader.onload = function (e) {

  $('.img-preview').attr('src', e.target.result);
  if ($('.uploaded-image').is(':hidden')){
  $('.uploaded-image').toggleClass("hidden")
  $('.add-image').toggleClass("hidden")
  }
  }

  reader.readAsDataURL(input.files[0]);
  }
  }

  $(".imgInp").change(function(){
  readURL(this);
  });

  });

Answer 1

因为您没有引用与文件输入相关的元素，所以您的代码会将其应用于具有指定类的所有元素。

  $('.img-preview').attr('src', e.target.result);
  if ($('.uploaded-image').is(':hidden')){
  $('.uploaded-image').toggleClass("hidden")
  $('.add-image').toggleClass("hidden")
  }
  }

你应该像这样引用它们：

＆＃13;

  $(document).ready(function() {
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        var
        $container = $(input).closest('.upload'), // Find relative .upload container
        $preview = $container.find('.img-preview'), // Find relative .img-preview in the container
        $uploadedImage = $container.find('.uploaded-image'), // Find relative .uploaded-image in the container
        $addImage = $container.find('.add-image'); // Find relative .add-image in the container

        reader.onload = function(e) {
          
		  // Use relative elements in your code
          $preview.attr('src', e.target.result);
          if ($uploadedImage.is(':hidden')) {
            $uploadedImage.toggleClass("hidden")
            $addImage.toggleClass("hidden")
          }
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    $(".imgInp").change(function() {
      readURL(this);
    });

  });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-md-offset-1">
  <form id="form1">
    <p style="text-align:center;"> <b>Image 2</b> </p>
    <div class="upload center-block">
      <input class="input-file imgInp" type="file">
      <label for="files">
        <span class="add-image">
          Add <br> Image
        </span>

        <span class="uploaded-image hidden">
          <img  class="img-preview" src="#" width="160" height="160" alt="your image" style="margin:0px" />
        </span>
        <output id="list"></output>
      </label>
    </div>
  </form>
</div>
<div class="col-md-2 col-md-offset-1">
  <form id="form1">
    <p style="text-align:center;"> <b>Image 1</b> </p>
    <div class="upload center-block">
      <input class="input-file imgInp" type="file">
      <label for="files">
        <span class="add-image">
          Add <br> Image
        </span>

        <span class="uploaded-image hidden">
          <img  class="img-preview" src="#" width="160" height="160" alt="your image" style="margin:0px" />
        </span>
        <output id="list"></output>
      </label>
    </div>
  </form>
</div>

＆＃13;

Answer 2

您需要输入索引，代码如下

 function readURL(input) {
  var index = $("#form1 input[type=file]").index(input);
 ...
  $('.img-preview').eq(index).attr('src', e.target.result);
 ...

  }

图像上传时的JavaScript将图像预览添加到最近的div

2 个答案: