无需表单提交实现文件上传至Servlet的技术问题求助

核心问题分析 #

你遇到的问题根源在于手动设置multipart/form-data请求头——浏览器会自动为FormData生成并添加带boundary的Content-Type，手动设置会覆盖这个自动生成的头，导致服务器无法解析分块数据；而如果完全不处理请求头，只要FormData构造正确，浏览器会自动处理，Servlet就能正常解析。

前端实现 #

1. 原生XMLHttpRequest（单/多文件） #

// 获取文件输入元素（支持多文件需给input加multiple属性）
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;

const formData = new FormData();
// 单文件：formData.append('file', files[0]);
// 多文件：遍历所有文件添加到FormData
for (let i = 0; i < files.length; i++) {
  formData.append('files', files[i]); // 参数名需和Servlet端一致
}

const xhr = new XMLHttpRequest();
xhr.open('POST', '/你的Servlet路径', true);

// 禁止手动设置Content-Type！浏览器会自动生成带boundary的请求头
// xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 删除此行

xhr.onload = function() {
  if (xhr.status === 200) {
    // 解析服务器返回的JSON
    const response = JSON.parse(xhr.responseText);
    // 此处处理JSON数据，比如渲染表格
    console.log(response);
  } else {
    console.error('上传失败:', xhr.statusText);
  }
};

xhr.send(formData);

2. jQuery Ajax实现 #

$('#fileInput').on('change', function() {
  const formData = new FormData();
  const files = this.files;
  
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }

  $.ajax({
    url: '/你的Servlet路径',
    type: 'POST',
    data: formData,
    processData: false, // 必须设置，禁止jQuery处理FormData
    contentType: false, // 必须设置，让浏览器自动生成请求头
    success: function(response) {
      // 处理JSON响应并渲染表格
      console.log(response);
    },
    error: function(xhr, status, error) {
      console.error('上传出错:', error);
    }
  });
});

3. Fetch API实现 #

const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
const formData = new FormData();

for (const file of files) {
  formData.append('files', file);
}

fetch('/你的Servlet路径', {
  method: 'POST',
  body: formData,
  // 无需手动设置Content-Type，fetch会自动处理
})
.then(response => {
  if (!response.ok) throw new Error('上传失败');
  return response.json();
})
.then(data => {
  // 处理JSON数据，渲染表格
  console.log(data);
})
.catch(error => console.error(error));

Servlet 端调整（兼容无表单上传） #

你的现有Servlet支持表单提交，只需确认以下几点：

1. 给Servlet添加@MultipartConfig注解（或在web.xml中配置multipart参数）：

@WebServlet("/你的Servlet路径")
@MultipartConfig(
    fileSizeThreshold = 1024 * 1024 * 2, // 2MB
    maxFileSize = 1024 * 1024 * 10,      // 10MB
    maxRequestSize = 1024 * 1024 * 50    // 50MB
)
public class FileUploadServlet extends HttpServlet {
  // ...
}

2. 获取文件Part时，参数名要和前端formData.append()的名称一致：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 设置响应为JSON格式
  response.setContentType("application/json");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();

  List<String> uploadedFiles = new ArrayList<>();
  // 获取所有上传的文件Part
  Collection<Part> parts = request.getParts();
  for (Part part : parts) {
    // 跳过非文件字段
    if (part.getSize() > 0 && part.getSubmittedFileName() != null) {
      String fileName = part.getSubmittedFileName();
      // 保存文件到服务器示例路径
      String savePath = getServletContext().getRealPath("/uploads") + File.separator + fileName;
      part.write(savePath);
      uploadedFiles.add(fileName);
    }
  }

  // 构造JSON响应
  JSONObject jsonResponse = new JSONObject();
  jsonResponse.put("success", true);
  jsonResponse.put("uploadedFiles", uploadedFiles);
  out.print(jsonResponse.toString());
  out.flush();
}

多文件上传注意事项 #

• 前端input元素需添加multiple属性：<input type="file" id="fileInput" multiple>
• 后端用request.getParts()遍历所有文件，而非单个request.getPart("file")
• 确保服务器上传目录有写入权限

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