时间戳

首页 > 解决方案 > 如何在javascript中显示多个输入文件

javascript - 如何在javascript中显示多个输入文件

问题描述

我遇到了一个问题，我无法在表单中显示多个输入文件。我想显示多个输入文件，我该怎么做？

看到这个： https://i.ibb.co/GdS3GZ3/Capture.png

在第二个框中，我想显示我的其他图像。

注意：它在单个图像上工作，但我想显示多个图像

请帮忙。

索引.html

 <label for="diposite"><b>Photos</b></label>
      <input type='file' onchange="readURL(this);" multiple/>
      <img id="blah" src="https://i.ibb.co/42x6mCS/image.jpg" alt="your image" />

index.js

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah')
        .attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

标签： javascripthtmljquerycss

解决方案

<script>
    function readURL(input) {
        if (!input.files) {
            return;
        }
        const readers = [];
        const bean = document.getElementById('bean');
        for (let i = 0; i < input.files.length; i++) {
            readers.push(new FileReader());
            readers[i].onload = function(e) {
                const img = new Image();
                img.src = e.target.result;
                bean.appendChild(img);
            };
            readers[i].readAsDataURL(input.files[i]);
        }
    }
</script>
<label for="diposite"><b>Photos</b></label>
<input type='file' onchange="readURL(this);" multiple/>
<div id="bean"></div>

推荐阅读