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

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>

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

let imageBlockCout = 0 用于统计图像块数。
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");

现在，对于添加的每个文件输入，您都需要附加一个更改监听器：

   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

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

Preload images from more then one file input

javascript

input

preload