前言
在很多的网站都可以实现上传头像，可以选择自己喜欢的图片做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？下面话不多说了，来一起看看详细的介绍吧
一、注意事项:
1,该项目主要采用的是springboot+thymeleaf框架
2,代码展示的为ajax完成图片上传(如果不用ajax只需要改变相应的form表单配置即可)
二、效果实现:
1,页面效果:
2,文件夹路径下就会多了对应的图片:
三、代码实现:
1,在html文本中编辑为(采用thymeleaf框架):
<!-- 图片文本框 -->
<input type="file" class="form-control" id="file" name="file" th:onchange="javascript:preview(this)">
<!-- 这个是在上传之前回显图片图片展示 -->
<div id="preview">
<!--这个是为了将页面返回的图片展示出来的.默认隐藏-->
<img style="width: 100px; height: 100px;display:none" id="imgHidden" />
</div>
<!-- 提交...这里pageIndex和pageSize可传可不传,主要取决于提交之后是否需要回到当前页面. -->
<button type="submit" th:onclick="javascript:submitForm([[${pageIndex}]],[[${pageSize}]])" class="btn btn-primary">提交</button>
2,编辑js代码:
两种情况:1,有file中有值的时候提交;2,file文件中没有值的时候提交
function submitForm(pageIndex, pageSize) {
var formData = new FormData(); //将需要提交的参数封装起来
formData.append("id", $("#id").val());
var zswb = $("#file").val(); //获取file中的内容,看是否有值
if (zswb == '' || zswb.length < 1) { //没有file提交的时候走的接口
$.ajax({
url : '/editMovieWithoutFile',
type : 'post',
data : formData,
processData : false,
contentType : false,
success : function(value) {
var result = JSON.parse(value);
if (result == 'true') {
window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
} else {
Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
}
}
});
} else { //有file提交的时候走的接口
formData.append("file", $("#file")[0].files[0]);
$.ajax({
url : '/editMovieInfo',
type : 'post',
data : formData,
processData : false,
contentType : false,
success : function(value) {
var result = JSON.parse(value);
if (result == 'true') {
window.location.href = "/index?pageIndex=" + pageIndex+ "&pageSize=" + pageSize;
} else {
Lobibox.alert('error', {msg : "媒资信息更新失败!!!"});
}
}
});
}
}
//图片回显:
function preview(file) {
$("#imgHidden").css("display", "none");
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
file.value + '\'"></div>';
}
}
3,application.properties中的配置上传的限制
#配置文件传输 spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=0 #单个数据的大小 spring.servlet.multipart.maxFileSize=100MB #总数据的大小 spring.servlet.multipart.maxRequestSize=100MB
4,controller(这里就不演示无file的情况,因为只是接受参数很简单):
/**
* 有file文件时
* @param movieDto 封装了需要传递过来的参数
* @param file 图片file
*/
@RequestMapping("/editMovieInfo")
@ResponseBody
public String editMovieInfo(@RequestParam("id")final int id,@RequestParam("file")MultipartFile file) {
int result = btShareService.editMovieInfo(id,file,uploadDir);
if (result > -1) {
return JSON.toJSONString("true");
} else {
return JSON.toJSONString("false");
}
}
5,service层处理:
@Transactional
@Override
public int editMovieInfo(int id, MultipartFile file,String uploadDir) {
try {
// 图片路径
String imgUrl = null;
//上传
String filename = upload(file, uploadDir, file.getOriginalFilename());
if (!EmptyUtil.isEmpty(filename)) {
imgUrl = new File(uploadDir).getName() + "/" + filename;
}
MovieInfo movie = movieInfoService.selectMovieInfoByDcpId(Integer.valueOf(movieDto.getId()));
movie .setImgUrl(imgUrl)
movieInfoService.updateMovieInfoByDcpId(movieInfo);
return 0;
} catch (Exception e) {
e.printStackTrace();
return -1;
}
}
图片上传的方法
public String upload(MultipartFile file, String path, String fileName) throws Exception {
// 生成新的文件名
String realPath = path + "/" + UUID.randomUUID().toString().replace("-", "")+fileName.substring(fileName.lastIndexOf("."));
File dest = new File(realPath);
// 判断文件父目录是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir();
}
// 保存文件
file.transferTo(dest);
return dest.getName();
}
6,至于Dao层的操作和数据库修改这里就直接省略了....
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
