如何预览多个输入答案

【问题标题】：How to preview multiple inputs如何预览多个输入
【发布时间】：2016-08-20 05:03:16
【问题描述】：

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

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

我的代码如下所示：

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 个，每个单独工作，以便用户可以管理他即将上传的图片的顺序。

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

【问题讨论】：

您的代码有任何错误...尝试通过 firefox 48 对其进行测试。
这篇文章会帮助你stackoverflow.com/questions/4459379/…
也许您使用的是相同的 ID？网页中的 ID 必须是唯一的。
“只要我添加另一对输入和图像，就和工作的那个一样” document 中的Element.id 应该是唯一的。您可以使用设置了multiple 属性的单个<input type="file"> 元素，以允许用户在单个change 事件中上传多个文件。

标签： javascript jquery image preview

【解决方案1】：

编辑：

我不想在我的输入标签中有“多个”属性。我创建多个 div，每个都有一个不可见的输入标签和一个图像与绝对位置叠加。所以当用户点击 div 时，他可以选择一张图片，然后填满整个div。

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

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

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>

【讨论】：

非常感谢！这几乎就像我想要的那样工作！如果在 div 内的 div 内，你有什么提示我如何选择它？
@JonasLey "如果在 div 内部的 div 中，你有什么提示吗？" 你可以设置一个className在每个包含<img> 元素的div 处，然后使用document.querySelectorAll()； var divs = document.querySelectorAll(".divContainsPreview")，然后选择div具体索引，例如在索引0，使用Element.querySelector()divs[0].querySelector("img")
非常感谢！你知识渊博！

【解决方案2】：

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>

【讨论】：