在陣列長度超過10項后洗掉后續陣列項（即洗掉第10項之后的所有項）-JavaScript

我有一個檔案上傳器，其中包含要上傳的檔案的預覽影像。有前端和后端驗證可防止一次上傳中提交超過 10 個檔案。

我想要做的是，當附加超過 10 個檔案時，第 10 個以上影像的預覽影像將從影像預覽中洗掉（當前也輸出錯誤訊息）。對于輸入元素的檔案的實際 FileList，我有單獨的功能，但應該能夠獲得適用于兩者的解決方案。

下面是該問題的最小代碼表示。如果需要，我可以顯示完整的檔案上傳器代碼，但是有很多與此問題無關的代碼可能會造成混淆。

// Generate a preview <img> for each selected file
// the submitData.files array is generated from a change event listener on a file input elment

[...submitData.files].forEach(showFiles);
});


function showFiles(file) {

    let previewImage = new Image();
    previewImage.className = "img upload-preview-image";
    previewImage.src = URL.createObjectURL(file);

    // use decode() method that waits for individual preview images to be added when running validations

    previewImage.decode().then((response) => {

        // validations happen here for each image as part of the showFiles() function called in the forEach loop above

        let imgList = document.querySelectorAll('.upload-preview-image'), // redeclare under new var name inside promise

        if (imgList.length > 10) {

            /*** somehow remove all images from the imgList array after the 10th image,
            either by deleting them or exiting this function when the 10th item is added ***/

        }


    }).catch((encodingError) => {
        // Do something with the error.
    });

}

uj5u.com熱心網友回復：

如果您只想處理輸入中的前 10 個檔案，則可以將它們從submitData.files陣列中分割出來：

[...submitData.files].slice(0, 10).forEach(showFiles)

uj5u.com熱心網友回復：

要從頁面中洗掉imgList（非實時 NodeList）中除前 10 個選定節點之外的所有節點，您可以簡單地遍歷串列并呼叫.remove()適當的專案。

顯示代碼片段

let imgList = document.querySelectorAll('.upload-preview-image')
const img_max = 10

for (const [i, el] of [...imgList].entries()) {
  if (i >= img_max) {
    console.log(`remove imgList[${i}] : ${el.innerText}`)
    el.remove()
  } else {
    console.log(`keep imgList[${i}] : ${el.innerText}`)
  }
}

// refresh the static nodelist
imgList = document.querySelectorAll('.upload-preview-image')
console.log(imgList.length)

<ol>
  <li class="upload-preview-image">
    image 1
  </li>
  <li class="upload-preview-image">
    image 2
  </li>
  <li class="upload-preview-image">
    image 3
  </li>
  <li class="upload-preview-image">
    image 4
  </li>
  <li class="upload-preview-image">
    image 5
  </li>
  <li class="upload-preview-image">
    image 6
  </li>
  <li class="upload-preview-image">
    image 7
  </li>
  <li class="upload-preview-image">
    image 8
  </li>
  <li class="upload-preview-image">
    image 9
  </li>
  <li class="upload-preview-image">
    image A
  </li>
  <li class="upload-preview-image">
    image B
  </li>
  <li class="upload-preview-image">
    image C
  </li>
  <li class="upload-preview-image">
    image D
  </li>
  <li class="upload-preview-image">
    image E
  </li>
  <li class="upload-preview-image">
    image F
  </li>
</ol>

或者您可以僅回圈遍歷需要洗掉的那些：

let imgList = document.querySelectorAll('.upload-preview-image')
const img_max = 10

for (const [i, el] of [...imgList].slice(img_max).entries()) {
  console.log(`remove ${el.innerText}`)
  el.remove()
}

// refresh the static nodelist
imgList = document.querySelectorAll('.upload-preview-image')
console.log(imgList.length)

<ol>
  <li class="upload-preview-image">
    image 1
  </li>
  <li class="upload-preview-image">
    image 2
  </li>
  <li class="upload-preview-image">
    image 3
  </li>
  <li class="upload-preview-image">
    image 4
  </li>
  <li class="upload-preview-image">
    image 5
  </li>
  <li class="upload-preview-image">
    image 6
  </li>
  <li class="upload-preview-image">
    image 7
  </li>
  <li class="upload-preview-image">
    image 8
  </li>
  <li class="upload-preview-image">
    image 9
  </li>
  <li class="upload-preview-image">
    image A
  </li>
  <li class="upload-preview-image">
    image B
  </li>
  <li class="upload-preview-image">
    image C
  </li>
  <li class="upload-preview-image">
    image D
  </li>
  <li class="upload-preview-image">
    image E
  </li>
  <li class="upload-preview-image">
    image F
  </li>
</ol>

標籤：javascript数组循环

上一篇：解釋尋找第n個斐波那契數的代碼

下一篇：在blazor中，如何使用svg物件進行for回圈？