前言
永新网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?下面话不多说了,来一起看看详细的介绍吧
一、注意事项:
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层的操作和数据库修改这里就直接省略了....
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。