FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。它是XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。
下面我们看看怎么基于FormData来实现ajax文件上传功能。
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<input type="file" name="pic" id="pic">
<p id="pimg"></p>
</body>
</html>
<script type="text/javascript">
$(function (){
$("#pic").change(function (){
//formData可以通过ajax来提交表单
var formData=new FormData(document.getElementById("myform"));
//添加图片上传的控件
formData.append("pic",document.getElementById("pic"));
$.ajax({
url:"${path}/manage/product?action=uploadPic",
type:"post",
data:formData,
//上传图片必须指定
//不设置contentType头
contentType:false,
//不让jquery处理发送的数据
processData:false,
success:function (data){
$("#pimg").html("<img src='${path}/images/"+data+"' style='width:100px;'>");
}
});
});
});
</script>后端代码：
PrintWriter out=response.getWriter();
Part part=request.getPart("pic");
//获得文件后缀名 .jpg .png .gif 后缀名要和用户上传的相同
//获得报头信息
//例如：form-data; name="pic"; filename="1.jpg"
//form-data; name="pic"; filename=""
String head=part.getHeader("content-disposition");
String filename=null;
//判断是否上传了图片
if(head.indexOf(".")>0){
int index=head.indexOf(".");
//截取到后缀名
String fileext=head.substring(index,head.length()-1);
//生成一个唯一的文件名
filename=UUID.randomUUID().toString();
filename+=fileext;
//获取发布的网站的根目录
//D:\projects_idea2021\shop\target\shop-1.0-SNAPSHOT\
String path=this.getServletContext().getRealPath("/")+"images/";
//写入图片到指定的路径
part.write(path+filename);
//释放内存中和图片相关的数据
part.delete();
}
out.write(filename);
out.close();实现效果：
0条评论
点击登录参与评论