java实现前端+后端上传图片并回显(ssm)
程序员文章站
2024-01-20 08:31:52
...
效果:第一步的图片回显,点击保存才是上传
1、需要两个jar包
加入两个jar包,commons-fileupload-1.3.jar、commons-io-1.2.jar
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>1.2</version>
</dependency>
2、在配置文件applicationContext.xml加上以下配置
<!-- 定义文件解释器(文件上传) -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置默认编码 -->
<property name="defaultEncoding" value="utf-8"></property>
<!-- 上传图片最大大小1M-->
<property name="maxUploadSize" value="1048576"></property>
</bean>
3、首先看前端代码:
src里面的内容是我的用户的头像的url
<div>
<p>(点击头像开始选择新头像)</p><br>
<p >
<img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" src="${imgUser.data.userProfilePhoto}">
</p>
<br>
<form id="test">
<input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/>
</form>
<button data-role="none" onclick="testUpload();" class="btn btn-info">保存头像</button>
</div>
4、这里的两个方法可以实现将你要上传的图片先回显
function imgChange(e) {
console.info(e.target.files[0]);//图片文件
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
$('.user-header').attr('src',this.result);
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
$('.user-header').click(function () {
$("#file").click();
});
5、这个方法实现将图片信息发送到后台:
我因为要更新用户的头像,所以将用户id一起传过去
function testUpload(){
var form = new FormData();
form.append('id',${imgUser.data.userId});
form.append('file',$("#file")[0].files[0]);
$.ajax({
url:"/u/img",
data:form,
type:"POST",
processData:false,
contentType:false,
success : function(result){
if(result.status==200){
alert("成功")
}else{
alert(result.msg);
}
},
});
}
6、后台代码
:
@RequestMapping("/u/img")
@ResponseBody
public E3Result test(MultipartFile file,HttpServletRequest request,long id) throws IOException{
String path = request.getSession().getServletContext().getRealPath("/images");
System.out.println("路径:"+path);
String fileName = file.getOriginalFilename();
System.out.println("文件名称"+fileName);
File dir = new File(path, fileName);
System.out.println("判断目录是否存在:"+dir.exists());
if(!dir.exists()){
dir.mkdirs();
}
// MultipartFile自带的解析方法
file.transferTo(dir);
//这里我在拼接出我图片要显示的url
String imageurl = "http://localhost:8089/images/"+fileName;
//将数据库中信息更新
BUsers bUser = new BUsers();
bUser.setUserId(id);
bUser.setUserProfilePhoto(imageurl);
E3Result result = getUserInfoService.updateUser(bUser);
//返回结果
return result;
}
7、测试完成
图片在你的tomcat 的webapps下的images目录里面
上一篇: 【java】批量上传图片并回显功能
推荐阅读
-
【java】批量上传图片并回显功能
-
【java】批量上传图片并回显功能
-
java实现前端+后端上传图片并回显(ssm)
-
微信小程序实现图片上传功能实例(前端+PHP后端)
-
微信小程序图片上传java端以及前端实现
-
微信小程序实现图片上传功能实例(前端+PHP后端)
-
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)_javascript技巧
-
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)_javascript技巧
-
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)_javascript技巧
-
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)_javascript技巧