javascript - 收集多个输入文件以附加到 FormData
问题描述
假设我有以下表格。
<form id="testForm">
<input type="file" name="uploads[]"><br/>
<input type="file" name="uploads[]"><br/>
<input type="file" name="uploads[]"><br/>
<input type="submit">
</form>
这是提交代码的一部分,它试图收集文件以附加到 FormData,但我不知道如何正确执行。
var formData = new FormData();
var fileList = $("input[name='uploads[]']");
for(var x = 0; x < fileList.length; x++) {
formData.append('file'+x, ???);
console.log('appended a file');
}
var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.send(formData);
request.onload = function(e) {
console.log('Request Status', request.status);
};
这是服务器代码。
app.post('/upload', function(req, res) {
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
console.log('handling form upload - fields', fields);
console.log('handling form upload - files', files);
});
res.send('Thank you');
});
如果它有效,我希望看到 /tmp 中保存的输出和文件。
解决方案
您不必收集字段,因为您可以将表单本身放入FormData
对象中:
var form = document.getElementById('testForm');
form.addEventListener('submit', function(e) {
e.preventDefault();
var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.onload = function(e) {
console.log('Request Status', request.status);
};
var formData = new FormData(form);
request.send(formData);
});
更新
如果您需要上传多个文件,您可以multiple
在输入上使用属性而不是多个输入:
<form id="testForm">
<input type="file" name="upload" multiple>
<input type="submit">
</form>
推荐阅读
- git - 当我有多个 github 帐户时,通过 ssh 发生 Git 权限错误
- javascript - IE 不支持 JavaScript 对象属性?
- asp.net - 如何从 RDLC 报告中的数据集中获取一组特定单元格
- excel - 有没有办法在 Visual Basic 中编辑 excel VBA 宏
- sql - SQL 代码风格。我应该使用 INNER 关键字吗
- boost - BOOST_INCLUDEDIR 和 BOOST_LIBRARYDIR 不同时的 find_package(Boost) 错误
- python - 即使传入的 object.attribute 不存在,如何让 get_or_create() 保存对象
- google-apps-script - 如何在谷歌脚本中阅读收件箱中的所有邮件?
- python - Web Scraping - 从 href 递归调用链接,遍历存储数据
- python - 如何在 python 中从 Web 下载 xlsx 文件