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 方式来获取参数和文件
希望对你有所帮助