前言
在很多的网站都可以实现 上传 头像，可以选择自己喜欢的 图片 做头像，从本地上传，下次登录时可以直接显示出已经上传的头像，那么这个是如何实现的呢？下面话不多说了，来一起看看详细的介绍吧
一、注意事项:
1,该项目主要采用的是springboot+thymeleaf框架
2,代码展示的为ajax完成图片上传(如果不用ajax只需要改变相应的form表单配置即可)
二、效果实现:
1,页面效果:
2,文件夹路径下就会多了对应的图片:
三、代码实现:
1,在html文本中编辑为(采用thymeleaf框架):
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 图片文本框 --> <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文件中没有值的时候提交
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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中的配置上传的限制
|
1 2 3 4 5 6 7 |
#配置文件传输 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的情况,因为只是接受参数很简单):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * 有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层处理:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@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 ; } } |
图片上传的方法
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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层的操作和数据库修改这里就直接省略了....
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
原文链接：https://HdhCmsTestcnblogs测试数据/bbgs-xc/p/10058874.html
查看更多关于java实现图片的上传与展示实例代码的详细内容...