javascript - 加载图像预览的脚本不起作用

Question

我创建了在上传之前显示图像的脚本，我如何使用 5 个输入文件进行上传，该脚本必须让每个输入文件显示一张图像或预览图像

脚本:

<script>
function handleFileSelect(evt,ids) {
  var files = evt.target.files;
  var f = files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      document.getElementById('list'+ids).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
      ///alert("ok"+ids);
    };
  })(f);

  reader.readAsDataURL(f);
}
</script>

HTML 代码

<input type="file" id="files2" />
<output id="list2"></output>

为此输入文件 ID 调用脚本

<script>
document.getElementById('files2').addEventListener('change', function(){handleFileSelect('','2');},false);
</script>

正如你所看到的，我尝试从 handleFileSelect('','2') 发送变量，但永远不会起作用，我认为代码很好，但我肯定忘记了一些东西，我希望在这里可以帮助我解决这个问题，感谢社区

致以最诚挚的问候

Answer 1

试试这个代码

$(function () {
  var _URL = window.URL || window.webkitURL;
  $(".UploadImage").on("change", function () {
  	var preview = $(this).attr("data-img");
  	var file, img;
    if ((file = this.files[0])) {
    	img = new Image();
      img.onload = function () {
      	document.getElementById(preview).src = _URL.createObjectURL(file);   
      };
      img.src = _URL.createObjectURL(file);
    }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="file" data-img="preview1" class="UploadImage" />
<img src="" id="preview1"/>
</div>

<div>
<input type="file" data-img="preview2" class="UploadImage" />
<img src="" id="preview2"/>
</div>

<div>
<input type="file" data-img="preview3" class="UploadImage" />
<img src="" id="preview3"/>
</div>

<div>
<input type="file" data-img="preview4" class="UploadImage" />
<img src="" id="preview4"/>
</div>