- 创建页面导入 jquery
- 定义 input type=file
- 编写 ajax 请求
- 定义后台 servlet 接收文件
创建页面导入 jquery , 定义 input type=file , 编写 ajax 请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is ajax upload</title>
</head>
<body>
<input type="file" id="file" name="file" />
<br />
<button id="submitFile">ajax upload</button>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#submitFile").click(function() {
var formData = new FormData();
formData.append("file", document.getElementById("file").files[0]);
formData.append("param", "paramValue");
$.ajax({
url: "fileUpload",
type: "POST",
data: formData,
/*contentType
类型：String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
*/
contentType: false,
/*processData
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，
如果是一个对象(技术上讲只要不是字符串)，
都会处理转化成一个查询字符串，
以配合默认内容类型 "application/x-www-form-urlencoded"。
如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
*/
processData: false,
success: function (data) {
if (data == "success") {
alert("上传成功");
}
},
error: function () {
alert("上传失败");
}
});
});
</script>
</body>
</html>与平常编写的 ajax 的区别在于
- 使用 new FormData(); 来进行传值
-
多了一些属性
- contentType: false
- processData: false
document.getElementById("file").files[0]
- document.getElementById("file") : 是一个 JavaScript 对象
- 在传递值是需要拿到上传文件的 字节数据 .files[0]
- document.getElementById("file").files[0] 执行完会是一个 file 对象可以 .size可获得文件的大小
定义后台 servlet 接收文件
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Part part = request.getPart("file");
InputStream inputStream = part.getInputStream();
byte[] bytes = new byte[1024];
inputStream.read(bytes);
System.out.println(new String(bytes));
System.out.println("param:" + request.getParameter("param"));
response.getWriter().write("success");
}