Ajax实现异步上传图片

最新推荐文章于 2024-08-22 15:11:22 发布

Haaaaaang

最新推荐文章于 2024-08-22 15:11:22 发布

阅读量5.3w

点赞数 17

分类专栏：前端js 文章标签： ajax 图片上传

本文链接：https://blog.csdn.net/java__project/article/details/55062816

版权

前端js 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

目标：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 = {
				// 规定把请求发送到那个URL
				url: "/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
 */
@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.赋值完后，就完成了图片页面无刷新显示