java实现图片的上传和展示
阅读原文时间:2023年07月10日阅读:2

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

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