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

【问题标题】：Javascript Image Preview on multiple Input files多个输入文件上的 Javascript 图像预览
【发布时间】：2016-02-17 10:24:15
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery image input preview

【解决方案1】：

您应该使用通用类对元素进行分组。这样您就可以拥有一个事件处理程序。然后，您可以使用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

【讨论】：

感谢工作，您可能知道一种显示 pdf 和 doc 文件的方法吗？
我不相信这是可能的，至少不是很可靠。您可以在 iframe 中执行此操作，但这取决于用户的浏览器设置是否下载或显示文件。
@RoryMcCrossan 你的脚本有一个错误，但我不知道为什么，如果有人选择一个文件，例如大于 2gigs 的会出错
这是一个浏览器/操作系统的实现问题。坦率地说，如果您需要传输 2Gb 文件，通过网络浏览器上传是您应该做的最后一种方式。

【解决方案2】：

id selector(#) 将只选择第一个匹配的元素。

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

.next(selector) 将立即返回匹配元素集中每个元素的兄弟姐妹

试试这个：

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

【讨论】：