代码之家 › 专栏 › 技术社区 › Hasan A Yousef Michael Benjamin

一次发送多个文件到服务器

javascript

Hasan A Yousef Michael Benjamin · 技术社区 · 4 年前

如何使用以下HTML元素将多个文件发送到服务器:

<input name="file1" type="file" />
<input name="file2" type="file" /> 
<input name="file3" type="file" />

知道了,用 <input type="file" multiple /> 元素数据可以发送为:

const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');

formData.append('title', 'My Vegas Vacation');
for (let i = 0; i < photos.files.length; i++) {
  formData.append('photos', photos.files[i]);
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

1 回复 | 直到 4 年前

Unmitigated 4 年前

您可以通过在每个元素上循环,以几乎相同的方式附加来自输入的所有文件。

const formData = new FormData();
/*more specific selector: 
  "input[type=file][name=file1],input[type=file][name=file2],input[type=file][name=file3]"*/
document.querySelectorAll("input[type=file]").forEach(
    input=>formData.append('photos',input.files[0]);

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前