javascript - 限制图片上传数量 JavaScript

Question

我想限制图片上传的数量，以便用户最多可以包含 4 张图片。if (files.length > 4)仅添加一个简单的语句似乎不起作用。我想防止用户上传超过允许数量的文件。如何实现这一点以及使用 JavaScript 解决方案的逻辑是什么？

    let inputFile = document.getElementById("addImg1");
    let rowOfPhotos = document.getElementById("row-of-product-photos");

    inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;

      for (let i = 0; i < files.length; i++) {
        let file = files[i];

        if (file) {
          const reader = new FileReader();
          reader.addEventListener("load", function (e) {
            console.log(this);

            let imageFile = e.target;

            let divDocument = document.createElement("div");
            let divDocumentClose = document.createElement("div");
            let image = document.createElement("img");

            divDocument.setAttribute("class", "id-document");
            divDocumentClose.setAttribute("class", "id-document-close");

            image.setAttribute("class", "image-preview");
            image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
            image.setAttribute("src", imageFile.result);

            divDocument.appendChild(divDocumentClose);
            divDocument.appendChild(image);
            rowOfPhotos.appendChild(divDocument);
          });

          reader.readAsDataURL(file);
        } else {
          image.style.display = null;
        }
      }
    });
    document.querySelectorAll(".id-document-close").forEach(item => {
      item.addEventListener("click", e => {
        this.parentElement.style.display = "none";
      });
    });

.id-document{
  width: 90px;
  height: 90px;
  background: url(webimage/mario.jpg) no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 3%;
}

.id-document-close{
  height: 25px;
  width: 25px;
  position: absolute;
  right: -8px;
  top: -6px;
  border-radius: 100px;
  background: url(icons/close-white.svg) no-repeat center center;
  background-size: 11px;
  background-color: #282b2e;
  cursor: pointer;
}

        <div class="verification-main-input-div">
          <p class="verification-main-text">Add a photo with your item (optional)</p>
          <div id="row-of-product-photos" class="row-of-id-photos">
            <div class="two1" id="addImgLabel1">
              <label for="addImg1" class="input-label inputLabelCss">
                <div class="photosvg">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-camera camera-icon">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                    <circle cx="12" cy="13" r="4"></circle>
                  </svg>
                </div>
              </label> <!-- ngIf: images.length<maxImagesForProduct -->
              <input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
            </div>
          </div>
        </div>

标签： javascripthtml

Answer 1

您可以将上传文件的数量存储在一个变量中，并检查新上传的文件数量与之前上传的文件数量是否超过最大值。每次成功添加更多文件时增加该变量，每次关闭图像时将其减少一。

let numOfFiles = 0;
inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;
      if(numOfFiles + files.length > 4){
        alert("You can only upload at most 4 files!");
        return;
      }
      numOfFiles += files.length;
      //...
      divDocumentClose.addEventListener("click", e => {
              divDocument.style.display = "none";
              numOfFiles--;
      });
      //...
});

演示：

    let inputFile = document.getElementById("addImg1");
    let rowOfPhotos = document.getElementById("row-of-product-photos");
        let numOfFiles = 0;
    inputFile.addEventListener("change", function (e) {
      let files = e.target.files;
      let output = rowOfPhotos;
            if(numOfFiles + files.length > 4){
        alert("You can only upload at most 4 files!");
        return;
      }
      numOfFiles += files.length;
      for (let i = 0; i < files.length; i++) {
        let file = files[i];

        if (file) {
          const reader = new FileReader();
          reader.addEventListener("load", function (e) {

            let imageFile = e.target;

            let divDocument = document.createElement("div");
            let divDocumentClose = document.createElement("div");
            let image = document.createElement("img");

            divDocument.setAttribute("class", "id-document");
            divDocumentClose.setAttribute("class", "id-document-close");

            image.setAttribute("class", "image-preview");
            image.setAttribute("style", "width: inherit; height: inherit; border-radius: 20px;");
            image.setAttribute("src", imageFile.result);

            divDocument.appendChild(divDocumentClose);
            divDocument.appendChild(image);
            divDocumentClose.addEventListener("click", e => {
              divDocument.style.display = "none";
              numOfFiles--;
            });
            rowOfPhotos.appendChild(divDocument);
          });

          reader.readAsDataURL(file);
        } else {
          image.style.display = null;
        }
      }
    });

.id-document{
  width: 90px;
  height: 90px;
  background: url(webimage/mario.jpg) no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 3%;
}

.id-document-close{
  height: 25px;
  width: 25px;
  position: absolute;
  right: -8px;
  top: -6px;
  border-radius: 100px;
  background: url(icons/close-white.svg) no-repeat center center;
  background-size: 11px;
  background-color: #282b2e;
  cursor: pointer;
}

        <div class="verification-main-input-div">
          <p class="verification-main-text">Add a photo with your item (optional)</p>
          <div id="row-of-product-photos" class="row-of-id-photos">
            <div class="two1" id="addImgLabel1">
              <label for="addImg1" class="input-label inputLabelCss">
                <div class="photosvg">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-camera camera-icon">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                    <circle cx="12" cy="13" r="4"></circle>
                  </svg>
                </div>
              </label> <!-- ngIf: images.length<maxImagesForProduct -->
              <input id="addImg1" type="file" accept=".png, .jpg, .jpeg" style="display:none" multiple="">
            </div>
          </div>
        </div>