java实现图片的上传与展示实例代码

前言

在很多的网站都可以实现上传头像，可以选择自己喜欢的图片做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？下面话不多说了，来一起看看详细的介绍吧

一、注意事项:

1,该项目主要采用的是springboot+thymeleaf框架

2,代码展示的为ajax完成图片上传(如果不用ajax只需要改变相应的form表单配置即可)

二、效果实现:

1,页面效果:

2,文件夹路径下就会多了对应的图片:

三、代码实现:

1,在html文本中编辑为(采用thymeleaf框架):

　　
　　



提交

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 = '';
　　　　}
　　　　reader.readAsDataURL(file.files[0]);
　　} else {
　　　　prevDiv.innerHTML = '';
　　}
}

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的情况,因为只是接受参数很简单):

@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层的操作和数据库修改这里就直接省略了....

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。