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

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

<!--文件上传-->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.3.1</version>
</dependency>
<!--fastjson的依赖-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.4</version>
</dependency>

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

<!-- 引入jQuery异步上传js文件 -->
<script src="../../js/jquery-form.js" type="text/javascript"></script>

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

<form id="upload" class="form-signin" method="post" enctype="multipart/form-data">
    商品图片:<img id="pic" src="" width="100">
    <input type="file" name="img" class="input-block-level" onchange="uploadPic()"/>
</form>

（2）js代码

<!-- Ajax异步上传图片 -->
<script type="text/javascript">
    function uploadPic() {    // 上传设置
        var options = {
            // 规定把请求发送到那个URL
            url: "${pageContext.request.contextPath}/admin/upload",
            // 请求方式
            type: "post",
            // 服务器响应的数据类型
            dataType: "json",
            // 请求成功时执行的回调函数
            success: function (result) {
                // 图片显示地址
                $("#pic").attr("src", "/images"+result.path);
                //将图片路径复制给隐藏区
                $("#imageId").val(result.path);
            }
        };
        $("#upload").ajaxSubmit(options);
    }
</script>

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.效果：