如何预览多个输入

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 完全陌生，所以也许你可以帮助我！

谢谢！

编辑：

我不想在输入标签中包含 "multiple" 属性。我创建了多个 divs，每个都有一个不可见的输入标签和一个覆盖绝对位置的图像。所以当用户点击 div 时，他可以选择一张图片，然后填满整个 div.

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

那么我需要做些什么才能使 12 个上传标签中的每一个都与自己的预览图像分开工作？

Answer 1

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image  = new Image();
    image.addEventListener("load", function () {
      var imageInfo = file.name    +' '+
                      image.width  +'×'+
                      image.height +' '+
                      file.type    +' '+
                      Math.round(file.size/1024) +'KB';
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); // Free memory
    }
  });
  reader.readAsDataURL(file);  
}

elBrowse.addEventListener("change", function() {
  var files  = this.files;
  var errors = "";
  if (!files) {
    errors += "File upload not supported by your browser.";
  }
  if (files && files[0]) {
    for(var i=0; i<files.length; i++) {
      var file = files[i];
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }
    }
  }
  if (errors) {
    alert(errors); 
  }
});

#preview img{height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="browse" type="file"  multiple />
<div id="preview"></div>

Answer 2

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 到 select 兄弟 <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>

如何预览多个输入

How to preview multiple inputs

javascript

jquery

image

preview