Ajax实现异步上传图片

来源：互联网发布：艾弗森体测数据弹跳编辑：程序博客网时间：2024/06/05 16:00

目标：Ajax实现异步上传图片

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

开发流程

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Ajax异步上传图片</title><-- 引入jQuery异步上传js文件 --><script src="/resource/jquery.form.js" type="text/javascript"></script><!-- Ajax异步上传图片 --><script type="text/javascript">function uploadPic() {// 上传设置var options = {// 规定把请求发送到那个URLurl: "/upload/uploadPic.do",// 请求方式type: "post",// 服务器响应的数据类型dataType: "json",// 请求成功时执行的回调函数success: function(data, status, xhr) {// 图片显示地址$("#allUrl").attr("src", data.path);}};$("#jvForm").ajaxSubmit(options);}</script></head><body><form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data"><table><tbody><tr><td width="20%"><span>*</span>上传图片(90x150尺寸):</td><td width="80%">注:该尺寸图片必须为90x150。</td></tr><tr><td width="20%"></td><td width="80%"><img width="100" height="100" id="allUrl"/><!-- 在选择图片的时候添加事件，触发Ajax异步上传 --><input name="pic" type="file" onchange="uploadPic()"/></td></tr></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 */@Controllerpublic 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);// 设置响应数据的类型jsonresponse.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.赋值完后，就完成了图片页面无刷新显示

1 0