javascript - 预览图片上传多个输入

Question

我有 3 个带有图像预览的输入类型文件问题是，当我尝试为一个输入上传一张图像时，它会影响所有其他输入，这是我的代码:

<input type='file' onchange="readURL(this);" />    
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />

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

    reader.onload = function(e) {
      $('.blah')
        .attr('src', e.target.result);
    };

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

Answer 1

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

    reader.onload = function(e) {
      $(input).next()
        .attr('src', e.target.result);
    };

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img class="blah" src="http://placehold.it/180" alt="your image" />

您不应该直接附加到 .blah，它应该是当前输入的下一个元素