圖片上傳數量限制 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>

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>