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”属性。我创建了多个div，每个div都有一个不可见的输入标签和一个覆盖绝对位置的图像。因此，当用户点击div时，他可以选择一个图像，然后填充整个div。

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

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

Answer 1

编辑：

我不希望输入标记中包含“multiple”属性。我建立   多个div，每个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>

Answer 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>

如何预览多个输入

2 个答案: