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

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

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

<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 的处理，如何同步接收文件和参数

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 方式来获取参数和文件

希望对你有所帮助