关于使用Servlet与Ajax调用实现多文件上传的技术求助

别担心，这种多文件上传的坑我刚接触Servlet的时候也踩过，完全不用道歉！咱们一步步来把问题解决掉。

第一步：补全HTML表单的关键属性 #

文件上传的表单必须指定enctype="multipart/form-data"，否则服务器无法识别文件内容。另外建议把多个文件输入框的name设为统一值（比如uploadFiles），方便Servlet批量处理：

<form id="uploadFile" enctype="multipart/form-data">
  <input id="file1" class="files" type="file" name="uploadFiles">
  <input id="file2" class="files" type="file" name="uploadFiles">
  <button type="button" onclick="uploadFiles()">上传文件</button>
</form>

第二步：编写正确的Ajax上传逻辑 #

普通的Ajax请求无法直接传文件，必须用FormData对象封装，同时要关闭jQuery的自动数据处理和Content-Type设置（让浏览器自动生成正确的请求头）：

function uploadFiles() {
  // 从表单直接构建FormData，自动包含所有文件
  const form = document.getElementById('uploadFile');
  const formData = new FormData(form);

  $.ajax({
    url: '/fileUploadServlet', // 替换成你的Servlet映射路径
    type: 'POST',
    data: formData,
    processData: false, // 必须：禁止jQuery把FormData转成字符串
    contentType: false, // 必须：让浏览器自动设置multipart请求头
    success: function(response) {
      alert('上传成功！已上传文件：' + response.files.join(', '));
    },
    error: function(xhr, status, error) {
      console.error('上传失败原因：', error);
      alert('上传失败，请查看控制台日志');
    }
  });
}

第三步：Servlet端的文件处理（Servlet 3.0+版本） #

Servlet 3.0及以上自带了文件上传API，无需额外引入第三方依赖。只需给Servlet添加@MultipartConfig注解，就能处理multipart请求：

@WebServlet("/fileUploadServlet")
@MultipartConfig(
  fileSizeThreshold = 1024 * 1024 * 2, // 超过2MB的文件直接写入磁盘
  maxFileSize = 1024 * 1024 * 10,      // 单个文件最大10MB
  maxRequestSize = 1024 * 1024 * 50    // 整个请求最大50MB
)
public class FileUploadServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    PrintWriter out = response.getWriter();
    
    // 定义文件存储目录（项目下的uploads文件夹）
    String uploadDir = getServletContext().getRealPath("/uploads");
    File dir = new File(uploadDir);
    if (!dir.exists()) dir.mkdirs(); // 自动创建目录
    
    List<String> uploadedFileNames = new ArrayList<>();
    // 获取所有上传的文件部件
    Collection<Part> parts = request.getParts();
    
    for (Part part : parts) {
      // 只处理name为uploadFiles且有内容的部件
      if (part.getName().equals("uploadFiles") && part.getSize() > 0) {
        String fileName = extractFileName(part);
        // 保存文件到磁盘
        part.write(uploadDir + File.separator + fileName);
        uploadedFileNames.add(fileName);
      }
    }
    
    // 返回JSON格式的上传结果（这里用Gson转JSON，也可以手动拼接）
    out.println("{\"success\": true, \"files\": " + new Gson().toJson(uploadedFileNames) + "}");
    out.close();
  }
  
  // 从请求头中提取文件名（兼容不同浏览器的文件名格式）
  private String extractFileName(Part part) {
    String contentDisposition = part.getHeader("content-disposition");
    for (String token : contentDisposition.split(";")) {
      if (token.trim().startsWith("filename")) {
        return token.substring(token.indexOf('=') + 1).trim().replace("\"", "");
      }
    }
    return "unknown-file-" + System.currentTimeMillis();
  }
}

常见问题排查 #

• 确保你的Servlet版本是3.0及以上（对应web.xml的<web-app>版本为3.1或更高）
• 检查Ajax请求的URL是否和Servlet的@WebServlet映射路径完全一致
• 确认服务器的uploads目录有写入权限，否则会抛出IO异常
• 如果上传大文件失败，检查@MultipartConfig中的大小限制是否足够

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