javascript - 上传前显示图像预览时出错

Question

我正在使用以下代码从多个输入上传图像并显示预览。我只能查看第一个输入的预览。当涉及到其他三个时就不起作用了。

脚本

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

HTML

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

注意:有没有一种方法可以在不更改 HTML 的情况下，对脚本中如何显示预览进行一些小的更改。

我正在使用 Bootstrap v3.3

Answer 1

以下是您无需更改 HTML 即可执行的操作。使用nextElementSibling您可以获取下一个元素并将 src 值分配给它。

替代方案是 jQuery 的 .next()功能相同。

$(input).next().attr('src', url);

我还建议使用 Object urls而不是将文件作为 dataURL 读取，这需要时间在 Base64 编码字符串之间来回编译和反编译，而对象 url 只是指向文件的指针。

function readURL(input) {
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);
    input.nextElementSibling.src = url;
    // $(input).next().attr('src', url);
  }
}

如果可以的话，也许可以向文件输入添加一个额外的属性accept="image/*"，这样他们只会选择有效的图像文件