XMLHttpRequest 异步请求servlet 上传文件并且带有参数

我是大头鸟2025-10-07 14:11

XMLHttpRequest 可以异步请求servlet，在请求servlet的时候可以带有参数和上传文件，下面我们直接来看代码：

下面在页面中定义了两个文本标签和一个文件上传的标签

javascript 复制代码

  <input type="text" id="username" />
  <input type="text" id="password" />
  <input type="file" id="myfile"> 
  <button onclick="doLogin()">登录</button>
  <script type="text/javascript">
       function doLogin(){
           const xhr=new XMLHttpRequest();
           xhr.open("post","./fileservlet",true)
           let formData=new FormData();
           let username=document.getElementById("username").value;
           let password=document.getElementById("password").value;
           let obj=document.getElementById("myfile");
           formData.append("username",username);
           formData.append("password",password);
           formData.append("myfiles",obj.files[0]);
           xhr.send(formData);
           xhr.onreadystatechange=function(){

        	  console.log(xhr.readyState)

           }
       }
  </script>

接下来看fileServlet 的处理，如何同步接收文件和参数

java 复制代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Collection<Part> parts = request.getParts();
        for (Part part : parts) {
            String name = part.getName();
            if (part.getSubmittedFileName() == null) {
                // 这是一个普通字段
                String value =getValue(part);
                System.out.println("Field " + name + ": " + value);
            } else {
                // 这是一个文件字段
                String fileName = part.getSubmittedFileName();
                String contentType = part.getContentType();
                long size = part.getSize();
                System.out.println(fileName);
                
                // ... 处理文件上传
                 part.write(path + fileName); 
                 part.delete();
            }
        }
	}
	  // 一个辅助方法，用于从 Part 中读取字符串值
    private String getValue(Part part) throws IOException {
        // 通过 part.getInputStream() 读取输入流，然后转换为字符串
        // 这里是一个简化的示例，实际使用时可能需要处理编码
        return new String(part.getInputStream().readAllBytes(), "UTF-8");
    }

通过判断文件的名字来判断是普通的参数还是文件

利用servlet3.0+ 的part 方式来获取参数和文件

希望对你有所帮助