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!