心意乱
2018-10-08
880浏览量
创建页面导入 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 的区别在于
多了一些属性
document.getElementById("file").files[0]
定义后台 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");
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
集结各类场景实战经验,助你开发运维畅行无忧