JavaScript多文件上传异常：表单脚本仅能传单张图片，求排查

Hey there! It’s super common to hit this single-image upload snag when working with form scripts—let’s walk through the most likely issues in your code:

1. Your file input is missing critical attributes #

If your file input looks like <input type="file" name="image">, it’s only set up for one file. To support multiple uploads, you need two things:

• Add the multiple attribute so users can select multiple files at once
• Use an array-style name (like name="images[]") if your backend expects multiple files (this is mandatory for languages like PHP, and helpful for others)

Example of a corrected input:

<input type="file" name="images[]" multiple>

2. Your upload script is only grabbing the first file #

If you’re using JavaScript to handle the upload (like with FormData), double-check that you’re not just picking the first file from the input. A common mistake is:

// ❌ Only gets the first file
const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('images[]', file);

Instead, loop through all selected files and add them to FormData:

// ✅ Handles all selected files
const input = document.querySelector('input[type="file"]');
const formData = new FormData();

for (let i = 0; i < input.files.length; i++) {
  formData.append('images[]', input.files[i]);
}

// Send the data via fetch or XHR
fetch('/your-upload-endpoint', {
  method: 'POST',
  body: formData
});

3. Your form lacks the enctype attribute #

Without enctype="multipart/form-data", your form can’t properly send file data at all—let alone multiple files. Make sure your form tag includes this:

<form id="uploadForm" enctype="multipart/form-data" method="POST">
  <input type="file" name="images[]" multiple>
  <button type="submit">Upload Files</button>
</form>

4. Your backend is only processing one file #

Sometimes the issue isn’t frontend code at all! If your backend script is only handling the first file in the upload request (e.g., in PHP, only accessing $_FILES['images']['name'][0] instead of looping through all entries), you’ll only get one file saved. Double-check that your backend logic iterates over all uploaded files to process each one.

If you can share snippets of your actual form and upload code, we can pinpoint the exact issue faster—but these four checks cover 90% of single-file-only upload problems.

内容的提问来源于stack exchange，提问作者Zigoto