javascript - 在不止一次添加允许的文件总数时，在更改事件监听器中对文件数组进行切片 - JavaScript

Question

我有一个接受文件上传的表单，目前每次上传限制为 10 个文件。后端也有 PHP 验证。

当附加超过 10 个文件时，我目前在文件输入元素的 change 事件中有一个 JavaScript slice(0, 10) 方法，它删除任何当附加的文件数量超过 10 个时，文件(及其预览图像缩略图)。

// For each added file, add it to submitData (the DataTransfer Object), if not already present
[...e.target.files].slice(0,10).forEach((file) => {
    if (currentSubmitData.every((currFile) => currFile.name !== file.name)) {
        submitData.items.add(file);
    }
});

问题

但我似乎无法做的是想出一种方法来 slice() 复合附件情况下的文件数组，即如果最初附加了 8 个文件，然后用户决定在提交表单之前添加另外 4 个，使总数达到 12 个。当前切片仅在一次添加超过 10 个时发生。

我有一个 decode() 方法，它在一个循环内运行(针对每个附加的图像)执行前端验证，还有一个 promiseAllSettled() 方法等待在输出主要错误消息告诉用户检查页面上的特定错误之前要附加的最后一张图像。

问题

如果用户最初附加的文件数少于 10，然后在提交表单之前附加的文件数超过 10，我如何根据附加的文件总数对数组进行切片？

const attachFiles = document.getElementById('attach-files'), // file input element
dropZone = document.getElementById('dropzone'),

submitData = new DataTransfer();

dropZone.addEventListener('click', () => {
    // assigns the dropzone to the hidden 'files' input element/file picker
    attachFiles.click();
});

attachFiles.addEventListener('change', (e) => {

    const currentSubmitData = Array.from(submitData.files);

    console.log(e.target.files.length);

    // For each added file, add it to 'submitData' if not already present (maximum of 10 files with slice(0, 10)
    [...e.target.files].slice(0,10).forEach((file) => {
        if (currentSubmitData.every((currFile) => currFile.name !== file.name)) {
            submitData.items.add(file);
        }
    });

    // Sync attachFiles FileList with submitData FileList
    attachFiles.files = submitData.files;

    // Clear the previewWrapper before generating new previews
    previewWrapper.replaceChildren();

    // the 'decode()' function inside the 'showFiles()' function is returned
    // we wait for all of the promises for each image to settle 
    Promise.allSettled([...submitData.files].map(showFiles)).then((results) => {

        // output main error message at top of page alerting user to error messages attached to images

    });
    
}); // end of 'change' event listener
    
function showFiles(file) {

    // code to generate image previews and append them to the 'previewWrapper'

    // then use the decode() method that returns a promise and do JS validations on the preview images
    return  previewImage.decode().then(() => {
    
        // preform JS validations and append
    
        }).catch((error) => {
            console.log(error)
        });

} // end of showfiles(file)

Answer 1

我没有查看您的整个代码，而是根据查看特定代码段提出了解决方案/建议。

一旦你拼接了初始文件集，之后你可以检查剩余的文件数量，然后你可以根据所需的文件数量动态传递拼接中的第二个参数。

步骤:

• 创建一个单独的空数组，并在发生更改事件时将第一个选择的文件插入该数组。

• 现在检查这个新创建的数组长度，如果有任意数量的元素，那么您可以像这样更新第二个拼接方法参数:

  secondParameter = secondParameter - newArr.length
  

现场演示:

let splicedArrCount = 10;
let resArr = [];

function spliceArr() {
  const inputVal = Number(document.getElementById('number').value);
  if (inputVal) {
    const arr = Array(inputVal).fill(inputVal);
    if (!resArr.length) {
      resArr = [...arr];
    } else if (resArr.length) {
        splicedArrCount = splicedArrCount - resArr.length
      resArr.push(...arr.splice(0, splicedArrCount));
    }
  }
  console.log(resArr);
}

<input type="number" id="number" onChange="spliceArr()"/>

在上面的demo中，您可以通过在输入框中插入一个数字来进行测试，这会将数字转换为数组元素。对于前。如果您输入 8，它将创建一个包含 8 个元素的数组，然后如果您输入 4，它将更新一个数组。即 [8, 8, 8, 8, 8, 8, 8, 8, 4, 4]