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

前言

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

一、注意事项:

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

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

二、效果实现:

1,页面效果:

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

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

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

三、代码实现:

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

java" id="highlighter_945335">
			
				?

									<!-- 图片文本框 -->

									<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();

									}