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

Question

我找到了一种在上传之前预加载图像的方法，但我有多个文件输入。 我希望每个输入文件都预加载图像。 总的来说不是大问题，但网站上使用的文件输入数量不稳定。 用户可以添加上传图片块，以便他可以添加 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 ae 计数为 2 (divImage-2)。

Answer 1

让我们假设你在你的 HTML 中

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

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

然后，作为第一步，您需要创建两个全局变量：

1. let imageBlockCout = 0计算图像块的数量。
2. let addedPicSet = nnew Set()一组其他块正在使用的图片名称。

然后每次点击添加按钮，我们都会添加一个新的图像块，代码如下：

    $(
      $.parseHTML(
        `<div class="row">
                <input type="file" multiple id="photos-${imageBlockCount}">
                <div id="gallery-${imageBlockCount}" class="row"></div>
             </div>`
      )
    ).appendTo(".container");

现在，对于添加的每个文件输入，您需要附加一个 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);
        });
    });

我也做了一支笔来帮助你： https : //codepen.io/abdullah-shabaz/pen/qBdvZMQ