springMVC图片上传的处理方式详解
2017-08-25 14:58
781 查看
首先需要依赖的jar包:
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version> </dependency>
页面:
<a href="javascript:;" rel="external nofollow" class="a-upload"> <input class="" type="file" name="file" id="file" required="required">上传 </a>
大家如果觉得默认的上传文件的按钮不好看,可以引入下面的css样式:
.a-upload { padding: 4px 10px; height: 27px; line-height: 27px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .a-upload input { position: absolute; width: 100%; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
前端脚本:
$('#file').on('change', function () { var $this = $(this); var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); var fileName = $('#file')[0].files[0].name; var fileType = fileName.substring(fileName.lastIndexOf('.') + 1); var fileSize = $('#file')[0].files[0].size; if (fileType != 'jpg' && fileType != 'png' && fileType != 'gif') { alert("请上传.jpg、.png、.gif格式的图片!"); return; } if (fileSize > 300 * 1024) { alert("请上传大小小于300KB的图片!"); return; } $.ajax({ url: '/admin/upload', type: 'POST', data: formData, cache: false, processData: false, contentType: false }).done(function (result) { if (result != '') { $this.closest('div').append('<div class="img-preview"><img src="' + result + '"/></div>'); } else { alert("请上传.jpg、.png、.gif格式的图片!"); } }).fail(function () { alert("图片上传失败!"); }); });
后端接收:
@RequestMapping(value = "admin/upload", method = RequestMethod.POST) @ResponseBody public String uploadFile(@RequestParam("file") MultipartFile file) { try { String filename = file.getOriginalFilename(); if (filename.endsWith("jpg") || filename.endsWith("png") || filename.endsWith("gif")) { String prefix = filename.substring(filename.lastIndexOf(".")); String imgName = UUID.randomUUID().toString() + prefix; String imgUri = writeToFileSystem(imgName, file.getBytes()); return imgUri; } } catch (Exception e) { LOG.error("uploadFile failed:", e); } return null; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器
- springmvc处理上传图片代码(校验图片尺寸、图片大小)
- 使用ThinkPHP上传类处理KindEditor上传的图片(主要是注意返回格式的方式)
- Springmvc关于图片上传,json数据,拦截器案例的详解
- Android WebView 上传图片(以5.0为分界点)不同的处理方式
- 详解IOS开发中图片上传时两种图片压缩方式的比较
- JAVA 使用springMVC 上传多张图片或文件,并对图片进行按比例缩放处理
- 详解SpringMVC实现图片上传以及该注意的小细节
- [技术分享] .NET下 , 上传图片的处理方式 , 贴上代码 .
- springmvc图片上传(夹杂普通字段一次性处理)
- springmvc上传图片的处理
- springmvc图片上传后压缩处理
- springmvc处理上传图片代码(校验图片尺寸、图片大小)
- springmvc处理上传图片代码(校验图片尺寸、图片大小)
- springmvc 获取图片处理方式
- springmvc上传图片的处理2
- 谈谈django中图片上传的2种处理方式
- 详解springMVC两种方式实现多文件上传及效率比较
- SpringMVC中两种处理文件上传下载的方式.md
- 以Sequence方式处理上传的文件(此处文件以图片为例)