ajax实现图片上传及回显
ajax可以使网页实现异步更新。这意味这可以在不重新加载整个网页的情况下,对网页的某个部分进行更新。今天使用ajax上传图片,并且将图片的路径以json格式返回到界面,达到回选的效果。
1.需要的工具包
图片上传
commons-io
commons-fileupload
Alibaba提供的fastjson,转换成json格式转换
fastjosn
使用ajax表单提交的jquery插件
jquery.form.js
2.编写前端代码
一.导入jQuery以及ajax表单提交插件
二.静态页面
三.js代码
PS:在上面的第三处中的判断也可也不加,之所以加上的原因是之前在ajax中把dataType写成了dateType(修改后没有去掉),导致返回的是字符串。所以要加上判断,将返回的字符串格式化成json对象,然后使用。
四.后台代码,springmvc实现
@Controller //实现ServletContextAware接口
public class BookController implements ServletContextAware {
private ServletContext servletContext;
@Override
public void setServletContext(ServletContext arg) {
this.servletContext = arg;//得到ServletContext对象
}
@RequestMapping(value = "/imgupload.do", method = RequestMethod.POST)
@ResponseBody//加上该注解返回json数据 imgs页面的参数
public String imgLoad(@RequestParam("imgs") CommonsMultipartFile commonsMultipartFile) {
// 定义上传图片的路径
String realPath = servletContext.getRealPath("/resources/upload/");
System.out.println("上传路径:" + realPath);
// 得到文件名 通过CommonsMultipartFilename得到图片的名称
String originalFilename = commonsMultipartFile.getOriginalFilename();
System.out.println("文件名:" + originalFilename);
File file = new File(realPath, originalFilename);
//往服务器写入数据 上传文件
try {
commonsMultipartFile.getFileItem().write(file);
System.out.println("上传成功!");
} catch (Exception e) {
e.printStackTrace();
}//将文件名与路径拼接在一起
String path = "/resources/upload/" + originalFilename;
JSONObject jsonObject = new JSONObject();
jsonObject.put("paths", path);//将路径放入json对象中
String json = JSON.toJSONString(jsonObject);
System.out.println("JSON:" + json);
return json;//返回json对象
}
}
五.效果
上传图片后,图片会回显。根据后台打印的路径可以找到上传图片的位置。
在controller层的类中要实现ServletContextAware接口,并实现对应的方法得到ServletContext对象,根据该对象自定义上传文件的位置。然后根据提交的路径,获得页面的参数(imgs),得到一个CommonsMultipartFile对象,用这个对象得到选中的文件名。将得到的文件名和指定的位置放入File对象,通过CommonsMultipartFile对象的getFileItem().write(file)上传文件。将文件的位置和文件名拼接在一起,得到文件的路径。使用json对象将路径传到页面,将该路径赋给img标签的src属性,就得到了图片的上传与回显。
PS:在对应方法的上面要加上@ResponseBody注解,作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML。
每日鸡汤:人,要么庸俗,要么孤独!
Over!
上一篇: PHP解释器模式用法详解
下一篇: Mysql实现分区功能(二)_MySQL