我试图弄清楚如何在 React JS 中循环多个文件上传。
最终我希望能够循环遍历每个文件,以便我可以判断是否仅上传 PNG、JPG 和 MP3 文件。我还希望 PNG/JPG 文件限制为 5MB,MP3 文件限制为 2MB。
到目前为止,我不明白为什么我可以访问一个文件而不是一组文件。
<input id="file" type="file" onChange={this.handleChange.bind(this)} required multiple />
我的handleChange函数看起来像这样:
handleChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[id]: value
});
console.log(id)
console.log(value)
}
当我选择多个文件时,我只显示一个。例如,上面的两个控制台行会生成以下内容:
file
C:\fakepath\My Secret Document.docx
为什么只存储一个值value
?如何正确循环每个文件以检查其大小和类型?我对使用 JQuery 不感兴趣。
这些文件包含在 FileList 中event.target.files
, 你可以做Array.from(event.target.files)
并得到一个包含所有选定文件的数组。
有关更多信息FileList https://developer.mozilla.org/en-US/docs/Web/API/FileList
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)