Ajax实现异步上传图片

Posted 2020-10-14 For_elegant

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文件 -->

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>

<table>

<tbody>

<tr>

上传图片(90x150尺寸):</td>

注:该尺寸图片必须为90x150。

</td>

</tr>

<tr>

</td>

</tr>

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

实现步骤：

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

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

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

4.页面编写暂时到这里

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

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

[java] view plain copy

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("服务器繁忙，上传图片失败");
}
}
}