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

<!-- 图片文本框 --><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>

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>';　　}}

#配置文件传输spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=0#单个数据的大小spring.servlet.multipart.maxFileSize=100MB#总数据的大小spring.servlet.multipart.maxRequestSize=100MB

/*** 有file文件时* @param movieDto 封装了需要传递过来的参数* @param file 图片file*/@RequestMapping("/editMovieInfo")@ResponseBodypublic 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");　 }}

@Transactional@Overridepublic 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();}