Ajax实现异步上传图片

要求：点击页面浏览按钮后，选择需要上传的图片，页面无刷新，将上传的图片展示出来

开发流程

一：在页面编写表单代码和js代码

 

</tbody>
</table>
</form>
</body>
</html>

 

实现步骤：

1.编写form表单input类型为file

2.为页面保存按钮添加onchange事件

3.编写js代码，使用jQuery提交form表单（jQuery.form.js文件，可以自动模拟出一个form表单），请求路径

4.页面编写暂时到这里

二：在后台实现图片的上传

这里使用的是springmvc（注解开发）图片上传

package com.wanghang.upload;

import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

/**
 * Ajax异步上传图片
 *
 * @author Hang.W
 * @version 1.0, 2017-02-14 00:51:39
 */
@Controller
public class UploadController {

    /**
     * 使用Ajax异步上传图片
     *
     * @param pic 封装图片对象
     * @param request
     * @param response
     * @throws IOException
     * @throws IllegalStateException
     */
    @RequestMapping("/upload/uploadPic.do")
    public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {

        try {
            // 获取图片原始文件名
            String originalFilename = pic.getOriginalFilename();
            System.out.println(originalFilename);

            // 文件名使用当前时间
            String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());

            // 获取上传图片的扩展名(jpg/png/...)
            String extension = FilenameUtils.getExtension(originalFilename);

            // 图片上传的相对路径（因为相对路径放到页面上就可以显示图片）
            String path = "/upload/" + name + "." + extension;

            // 图片上传的绝对路径
            String url = request.getSession().getServletContext().getRealPath("") + path;

                File dir = new File(url);
            if(!dir.exists()) {
            dir.mkdirs();
            }

            // 上传图片
            pic.transferTo(new File(url));

            // 将相对路径写回（json格式）
            JSONObject jsonObject = new JSONObject();
            // 将图片上传到本地
            jsonObject.put("path", path);

            // 设置响应数据的类型json
            response.setContentType("application/json; charset=utf-8");
            // 写回
            response.getWriter().write(jsonObject.toString());

        } catch (Exception e) {
            throw new RuntimeException("服务器繁忙，上传图片失败");
        }
    }

}

 

图片上传

 

1.springmvc进行参数绑定，但默认是不支持图片上传的，可以在springmvc的配置文件中进行文件上传的配置

2.设置pic形参，接收页面传递的参数

3.普通文件上传代码

4.将图片以json格式写回页面

5.图片上传部分完成

页面图片展示

1.使用jQuery动态获取到<img>标签的id

2.将获取到的json数据赋值到<img>标签的src属性

3.赋值完后，就完成了图片页面无刷新显示

 

 

　　　　　　来源：http://blog.csdn.net/java__project/article/details/55062816