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

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

<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

Answer 2

id选择器（#）将仅选择第一个匹配的元素。

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

的元素

Fiddle here将在匹配元素集中的每个元素的兄弟之后立即返回

试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: