ajax上传文件
需要的依赖
- 文件上传需要的依赖和json的依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20140107</version>
</dependency>
spring-mvc 配置文件配置组件
- id 必须为 multipartResolver否则会报错!!!
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="88888888"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>
页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>jQuery+ajax实现简单的上传图片功能</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label>图片</label>
<img src="" alt="" id="img"/>
<input type="file" name="file" id="uploadImage" onchange="postData()">
</div>
</body>
<script type="text/javascript">
function postData() {
//1. 创建 FormData 对象
const formData = new FormData();
//可以省略
//formData.append("action", "UploadVMKImagePath");
//2. FormData 添加 需要上传的 input文件框， js 获取文件对象
formData.append("file", $("#uploadImage")[0].files[0]); //加入文件对象
//3. 发送 ajax上传文件
$.ajax({
url: "${pageContext.request.contextPath}/fileupload.action", //服务器接收的路径
// 请求方式，必须是post请求
type: "post",
// FormData 对象
// 【注意 后端使用上传文件的input框的name属性的值进行接收否则 500】
data: formData,
// 必须false才会避开jQuery对 formdata 的默认处理
// XMLHttpRequest会对 formdata 进行正确的处理
processData: false,
// 必须false才会自动加上正确的Content-Type
contentType: false,
//期待服务器响应的类型
dataType: 'json',
success: function (data) {
//alert(data.url)
//成功之后图片回显 设置或返回被选元素的属性值。
$("#img").attr("src", data.url);
},
error: function (data) {
}
});
}
</script>
</html>
后台代码
@ResponseBody //响应 json 数据
@PostMapping("/fileupload.action") //请求 url
public Object fileUpload(
//必须使用 上传文件的input框的name属性的值进行接收
@RequestParam("file") MultipartFile multipar,
HttpServletRequest request) {
//1. 获取上传的文件的文件名
String filename = multipar.getOriginalFilename();
//2. 获取上传文件的后缀名
String hzName = filename.substring(filename.lastIndexOf("."));
//System.out.println("文件后缀" + hzName);
//3. 将 uuid最为文件名
filename = UUID.randomUUID().toString() + hzName;
//4. 通过 ServletContext 获取服务器中 imgs的路径
String realPath = request.getServletContext().getRealPath("/imgs");
//System.out.println("imgs路径" + realPath);
//5. 进行文件写入
File file = new File(realPath + File.separator + filename);
//System.out.println("文件路径：" + file.getAbsolutePath());
try {
multipar.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
}
//6. 返回客户端 json对象,封装图片的路径,为了在页面实现立即回显
JSONObject jsonObject = new JSONObject();
//放入上传图片的名称
jsonObject.put("url", "/imgs/" + filename);
//如果 json对象返回必须 toString,转换特点
return jsonObject.toString();
}
参考
https://blog.csdn.net/qq_36538012/article/details/109306999
https://www.cnblogs.com/Renyi-Fan/p/9581951.html#_label4
