javascript - 如何预览多个输入

Question

我想预览用户即将上传的图像。现在，我知道我的代码适用于一个输入和一张图像。一旦我添加另一对输入和图像，与有效的输入和图像相同，就没有图像可供预览...

如何添加更多输入，每个输入都有自己的图像来预览该特定输入？

我的代码如下所示:

HTML:

<input type="file" accept="image/*" onchange="previewFile()">
<img id="output1" height="100px">

和 JavaScript:

function previewFile(){
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

我认为必须为函数提供一个 Var，我想选择哪个输出，但我对 Js 完全陌生，所以也许你可以帮助我!

谢谢!

编辑:

我不想在我的输入标记中包含“多个”属性。我创建了多个 div，每个 div 都有一个不可见的输入标签和一个覆盖绝对位置的图像。因此，当用户单击 div 时，他可以选择一个图像，然后该图像会填充整个 div。

对于一个 div 来说一切正常，但我还需要 11 个 div，每个 div 单独工作，以便用户可以管理他要上传的图片的顺序。

那么我需要做什么才能使 12 个上传标签中的每一个都单独使用自己的预览图像？

Answer 1

Edit:

I don't want to have a "multiple" attribute in my input tag. I created multiple divs, each with a non-visible input tag and an image that overlays with absolute position. So when the user clicks the div, he can choose an image, which then fills up the whole div.

It all works fine for one div but I need 11 more, each working seperately, so that the user can manage the order of his pictures he is about to upload.

So what do I have to do to make each of the 12 upload tags working seperately with its own preview image?

Element.id在 document 中应该是唯一的。您可以将单击的元素传递给 previewFile()调用，使用.nextElementSibling选择同级 <img>元素

function previewFile(input) {
  var preview = input.nextElementSibling;
  var file = input.files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>