Question

我想允许用户通过Ajax上传多个文件。如果某些文件太大，我想将它们从上传列表中删除。我该怎么做呢？我目前在输入字段中有以下内容。

<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />

到目前为止，我已经想出了类似的东西来验证哪些文件太大了：

handleChange(event) {
    const target = event.target;

    if (target.type === 'file'){
        console.log("FILES")
        const files = target.files
        console.log("The following files are too large")
        for (let i=0; i < files.length; i++){
            if (files[i].size > 50000){
                console.log(files[i].name)
            }
        }
    }
}

我感到困惑的是如何处理文件，因为它们实际上并不是文件系统上实际文件的链接。文件结构如何工作？如何将好文件存储到可以使用Ajax上载的新文件结构中？

Answer 1

target.files只是一个数组。您可以对其进行简单过滤，删除您不想要的文件，并使用新阵列执行任何操作（例如，将其存储在组件的状态中）。

const files = target.files.filter(file => file.size <= 50000);
this.setState({files});
// or uploadFiles(files)

如果您询问如何通过XMLHTTPRequest实际发送文件，可以使用FormData来完成：

const data = new FormData();
files.forEach(file => data.append(file.name, file));

然后通过XMLHTTPRequest发送FormData对象。

从文件上载中删除大文件

1 个答案: