Javascript 多个输入文件的图像预览

Question

如何预览多个输入文件的图像。

html:

<form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
   <input type='file' id="imgInp2" />
   <img id="blah2" src="#" alt="your image" />
   <input type='file' id="imgInp3" />
   <img id="blah3" src="#" alt="your image" />
</form>

jquery:

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]);
    }
}

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

该代码适用于一个输入类型文件，但我不知道如何修改它以获得不止一个预览。

Answer 1

id selector(#) will select only first matched element.

使用 $('input[type="file"]') 到 select 所有类型为 file

的元素

.next(selector) 将 return 紧跟在匹配元素集合中每个元素的兄弟之后

试试这个：

function readURL(input) {
  var elem = $(input);
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      elem.next('img').attr('src', e.target.result);
    }
    reader.readAsDataURL(elem.get(0).files[0]);
  }
}

$("input[type='file']").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
  <input type='file' id="imgInp2" />
  <img id="blah2" src="#" alt="your image" />
  <input type='file' id="imgInp3" />
  <img id="blah3" src="#" alt="your image" />
</form>

Fiddle here

Answer 2

您应该使用通用类来对元素进行分组。这样你就可以拥有一个事件处理程序。然后，您可以使用 next() 从当前 input 中找到 img 元素。试试这个：

<form id="form1" runat="server">
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
    <input type='file' class="imgInp" />
    <img class="blah" src="#" alt="your image" />
</form>

function readURL() {
    var $input = $(this);
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $input.next('.blah').attr('src', e.target.result).show();
        }
        reader.readAsDataURL(this.files[0]);
    }
}

$(".imgInp").change(readURL);

Working example

Javascript 多个输入文件的图像预览

Javascript Image Preview on multiple Input files

javascript

jquery

image

input

preview