HTML表单中实现多个文件上传的方法

在网页开发中，实现多个文件上传的功能十分常见，它为用户提供了便捷的数据传输方式。接下来，我们将详细探讨在HTML表单中达成这一功能的方法。

需要在HTML表单中使用<input>标签，并将其type属性设置为file。为了允许用户选择多个文件，还需添加multiple属性。例如：<input type="file" name="files[]" multiple>。name属性的值设置为files[]，这种数组形式的命名，方便后端接收多个文件数据。

在CSS样式方面，可以对文件上传按钮进行美化，使其与网页整体风格相符。通过选择器定位到<input type="file">元素，调整它的外观，如改变按钮颜色、大小、字体等。例如：

input[type="file"] {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

对于前端的JavaScript交互，我们可以获取上传的文件列表。使用document.querySelector方法获取<input>元素，然后监听change事件。在事件处理函数中，可以遍历files属性获取每个选中的文件信息。示例代码如下：

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
  const files = this.files;
  for (let i = 0; i < files.length; i++) {
    console.log(files[i].name);
  }
});

后端处理多个文件上传也很关键。以常见的Node.js + Express框架为例，使用multer中间件来处理文件上传。首先安装multer，然后在代码中引入并配置：

const express = require('express');
const app = express();
const multer = require('multer');

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

app.post('/upload', upload.array('files'), function(req, res) {
  // 处理上传的文件
  res.send('文件上传成功');
});

const port = 3000;
app.listen(port, function() {
  console.log(`Server running on port ${port}`);
});

通过上述步骤，我们可以在HTML表单中完整地实现多个文件上传功能，从前端的选择、显示，到后端的接收处理，每一步都紧密相连，为用户提供高效的文件上传体验。