Javascript 从多个文件输入预加载图像

我找到了一种在上传前预加载图像的方法，但我有不止一个文件输入。我想为每个输入文件预加载图像。一般来说，这不是一个大问题，但网站上使用的文件输入量并不稳定。一个用户可以添加一个上传图像块，这样他可以添加2或3个，我想为每个他广告的可能性预加载图像。 但是我的经验没有达到它所需要的水平。 那么我的问题是，有可能实现它吗？ 我为一个特定文件输入预加载图像的代码如下：

    function readURL(input) {
          if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                              $('#blah')
                                        .attr('src', e.target.result)
                                        .height(50);
                    };
                    reader.readAsDataURL(input.files[0]);
          }
}

如果用户添加一个图像块，则其外观如下所示：

<div id="divImage-1" class="form-group form-file-upload">
<label id="labelImage-1" for="labelImage2-1">New Picture</label>
<div></div>
<label id="labelImage2-1" for="inputImage-1" class="form-file-upload1">Upload Image</label>
<input id="inputImage-1" type="file" onchange="readURL(this);">
<img id="blah" height="50" alt="Image preview">
</div>

新图片
上传图像

---

如果用户创建第二个ID，则所有ID ae计数为2（divImage-2）。

让我们在HTML中假设这一点

<button class="btn btn-primary" id="addBtn">Add Image Block</button>

<div class="container"></div>

现在，对于添加的每个文件输入，您需要附加一个on change侦听器：

   let currentBlockCount = imageBlockCount;
    $("#photos-" + imageBlockCount).on("change", function () {
      let input = this;

      if (!input.files) {
        return;
      }

      //for every image that has been read by FileReader we show it
      //in its own card inside its button gallery
      let onFileLoaded = function (event) {
        $(
          $.parseHTML(
            `<div class="col-sm-3">
                <div class="card">
                  <img 
                    class="card-img-top" 
                    src="${event.target.result}">
                </div>
              </div`
          )
        ).appendTo("#gallery-" + currentBlockCount);
      };

      //input.files is an array like object, so we convert it to array
      Array.from(input.files)
        .filter(
          //first we filter images which are already in use
          (file) => !addedPicSet.has(file.name)
        )
        .forEach((file) => {
          let reader = new FileReader();
          //we attach an onLoad listener for each reader
          reader.onload = onFileLoaded;

          //then we tell the reader object which file to read
          reader.readAsDataURL(file);

          //add the image name in the set of used image names
          addedPicSet.add(file.name);
        });
    });

让currentBlockCount=imageBlockCount；
$（“#照片-”+imageBlockCount）。打开（“更改”，函数（）{
让输入=这个；
如果（！input.files）{
返回；
}
//对于FileReader读取的每个图像，我们都会显示它
//在其按钮库中的自己的卡中
设onFileLoaded=函数（事件）{
$(
$.parseHTML(
`
！addedPicSet.has（文件名）
)
.forEach（（文件）=>{
let reader=new FileReader（）；
//我们为每个读卡器附加一个onLoad侦听器
reader.onload=未加载；
//然后我们告诉阅读器对象要读取哪个文件
reader.readAsDataURL（文件）；
//在已使用的图像名称集中添加图像名称
addedPicSet.add（文件名）；
});
});

---

我还为您制作了一支笔：

是的，您所做的很好，我在发布之前就发现了。但问题是，我可以为一个输入上载两个图像，但我有两个输入，每个图像都应该预渲染。这是我要实现的问题。所以，您是说可以有多个输入按钮来添加图片？a我说的对吗？你需要检查他们中是否有人再次上传相同的图片并跳过该图片吗？是的，我希望用户单击“+图片”和包含上面显示的图像块的块将被创建。因此，如果用户创建2个块，那么它们是2个文件类型的输入。脚本应该为图像的每一个输入量预加载。因此，如果用户单击/添加5个图像块，则有5个输入，并且所有这些输入都应该预加载用户尝试上载的图像。好吗非常感谢你，如果它能帮助你，你可以看到上面的类或ID是如何被称为数字1将为用户添加的每个输入块计数，请检查，如果这是你正在寻找的。

   let currentBlockCount = imageBlockCount;
    $("#photos-" + imageBlockCount).on("change", function () {
      let input = this;

      if (!input.files) {
        return;
      }

      //for every image that has been read by FileReader we show it
      //in its own card inside its button gallery
      let onFileLoaded = function (event) {
        $(
          $.parseHTML(
            `<div class="col-sm-3">
                <div class="card">
                  <img 
                    class="card-img-top" 
                    src="${event.target.result}">
                </div>
              </div`
          )
        ).appendTo("#gallery-" + currentBlockCount);
      };

      //input.files is an array like object, so we convert it to array
      Array.from(input.files)
        .filter(
          //first we filter images which are already in use
          (file) => !addedPicSet.has(file.name)
        )
        .forEach((file) => {
          let reader = new FileReader();
          //we attach an onLoad listener for each reader
          reader.onload = onFileLoaded;

          //then we tell the reader object which file to read
          reader.readAsDataURL(file);

          //add the image name in the set of used image names
          addedPicSet.add(file.name);
        });
    });