上一篇文章讲解的是,利用form表单的形式将图片发送给服务器,还讲解了如何将图片显示在前端网页,有兴趣可以看一看。将图片从本地上传到服务器的过程详解
那这篇博客就介绍一下,如何利用Ajax技术实现页面无刷新将图片上传到服务器
其实很简单,form表单形式上传图片是设置form表单enctype="multipart/form-data"
而ajax就是监听input
的change
事件时,获取到文件var file=$(this)[0].files[0];
然后新建一个FormData对象,利用FormData的append()方法将file传入***(在这里就相当于form表单提交数据时input的name属性传参)***
具体代码如下
$("#fileupload").change(function() {
//注意这里不能写错。。。
var file=$(this)[0].files[0];
var formData = new FormData();
formData.append("upload",file);
//对文件类型进行判断
var index=file.name.lastIndexOf(".");
var type=file.name.substring(index);
if(type!=".jpg"&&type!=".png"){
alert("只能上传jpg和png格式的图片!!");
return;
}
$.ajax({
url:"user_UserPicture.action",
data:formData,
dataType:"text",
type:"post",
//这两个属性必须设置!!!!
contentType: false,
processData: false,
success:function (data) {
$("#imageview").attr("src","upload/"+data);
}
})
});
然后服务器端怎么接收参数,具体框架有具体的做法,可以参考上一篇博客利用Struts2接受图片的做法。
将图片从本地上传到服务器的过程详解