ajax实现异步图片上传并回显

ajax可以使网页实现异步更新。这意味这可以在不重新加载整个网页的情况下，对网页的某个部分进行更新。今天使用ajax上传图片，并且将图片的路径以json格式返回到界面，达到回显的效果。
1.导入相关依赖包及相关js文件

    commons-fileupload
    commons-fileupload
    1.3.1


    commons-io
    commons-io
    1.3.1



    com.alibaba
    fastjson
    1.2.4

注意：将ajax表单提交的jquery插件jquery-form.js放进项目的js文件夹中，并用代码引入。

2.前端代码
（1）静态页面

    商品图片:
    

（2）js代码

3.后台代码实现

//上传图片
@RequestMapping("/upload")
@ResponseBody//加上该注解返回json数据
public String upload(@RequestParam("img")MultipartFile file, HttpServletRequest request) throws Exception {
    // 保存图片的路径，图片上传成功后，将路径保存到数据库
    String filePath = request.getSession().getServletContext().getRealPath("images/products");
    System.out.println(filePath);
    // 生成文件新的名字
    String newFileName = UUID.randomUUID() + ".jpg";
    // 封装上传文件位置的全路径
    File targetFile = new File(filePath, newFileName);
    if (!targetFile.exists()) {
        targetFile.mkdirs();
    }
    //上传文件
    file.transferTo(targetFile);
    String path = "/products/" + newFileName;
    JSONObject jsonObject = new JSONObject();
    //将路径放入json对象中
    jsonObject.put("path", path);
    String json = JSON.toJSONString(jsonObject);
    //返回json对象
    return json;
}

注：由于返回的是json数据，要在方法前加上注解@ResponseBody，加上该注解后return返回的是json数据。

4.效果：