网上这种例子有很多,但是我今天就想整理一下自己的,从前端到后台。
首先,这个例子是针对刚刚毕业或者刚刚培训完的初学者,特别是培训的,因为我本人也是培训出来的,你们在培训学校学的上传图片
<form action="">
</form>
通过这个方式的,基本上可以无视了,因为我做到现在没有哪个需求是上传完图片就立刻跳转页面的,所以我整理的是ajax上传图片。
话不多说,先上代码
页面
<Form id="form">
<input type="file" onchange="upload();"/>
</Form>
<img src=""/>//这里是后台返回的地址显示图片的地方
前端
function upload() {
//这里唯一需要注意的就是这个form-add的id
var formData = new FormData($("#form")[0]);
$.ajax({
//接口地址
url: '/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
//成功的回调
if(data.code == 300){
$("img").attr("src",data.path) //得到后台传来的项目路径并显示图片
}
},
error: function (returndata) {
//请求异常的回调
// modals.warn("网络访问失败,请稍后重试!");
}
});
}
后台
//这里后台用的是MultipartFile去接收File对象
@RequestMapping("/upload")
public Map upload(MultipartFile file){
//这里要注意的是两个路径,这是重点,在后台关键的就是操作两个路径,
//一个是物理路径,是你实际上传的地方,
//然后返回的是项目路径,我称之为虚拟路径,(和物理路径对应)。
//这里省略号是具体某个文件,物理路径和虚拟路径必须保持一致
String realPath=request.getSesson.getServletContext().getRealPath(/.....路径)
String viturlPath=request.getScheme()+”://”+request.getServerName()+”:”+requestServerPort()+
request.getContextPath()+”/”.........路径
file.transferTo(new File(realPath));//传到物理路径
//这里我用了一个jdk1.7的语法封装map,我比较喜欢这种语法,可读性比较好
Map<String,Object> map=new HashMap()<String,Object>{
{
put("path",viturlPath);
}
};
}