input 框上传多个文件以及做文件校验

在HTML中，可以使用<input type="file" multiple>来允许用户上传多个文件。在JavaScript中，可以通过监听input元素的change事件来处理文件上传，并使用File API来进行文件验证。

以下是一个简单的例子，展示了如何上传多个文件并进行文件类型和大小验证：

HTML:

<input type="file" id="file-upload" multiple />

JavaScript:

document.getElementById('file-upload').addEventListener('change', function(e) {
    const files = e.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        // 检查文件大小
        if (file.size > 10 * 1024 * 1024) { // 例如，限制文件大小为10MB
            alert('文件太大！');
            return;
        }
        // 检查文件类型
        if (!file.type.startsWith('image/')) { // 例如，限制只能上传图片
            alert('请上传图片文件！');
            return;
        }
        // 其他验证逻辑...
 
        // 如果验证通过，可以在这里处理文件上传等逻辑
        // 例如使用 FormData 和 fetch API 上传文件
    }
});

这段代码中，我们监听了文件输入框的change事件，当用户选择文件后触发。我们遍历所有选中的文件，对每个文件应用大小和类型的验证。如果验证通过，可以继续处理文件上传的逻辑。如果验证失败，则给出提示信息并返回，不再执行后续操作。