依赖的环境: springmvc(详细配置不细说, 只说和上传有关的部分 ), jquery和相关的上传控件(点击下载, 不要积分)
后台部分:
springmvc 文件上传解析器配置(必须配置), IO异常配置(可选, 不是必须的)
<!-- 文件上传解析器 --><bean id="multipartResolver"class="org.springframework.monsMultipartResolver"><!-- 默认编码 --><property name="defaultEncoding"><value>UTF-8</value></property><property name="maxUploadSize"><!-- 最大1MB 1024*1024 --><value>1048576</value></property><!-- 对上传的文件开启懒解析, controller中可以 --><property name="resolveLazily" value="true" /></bean><!-- SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException --> <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的，而且此时还没有进入到Controller方法中 --> <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><property name="exceptionMappings"><props><!-- 遇到MaxUploadSizeExceededException异常时，自动跳转到/WEB-INF/jsp/error_fileupload.jsp页面 --> <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_upload</prop></props></property></bean>
controller中接收上传文件方法, 此处将文件统一保存到 项目/upload 目录下, 同时返回 uuid1.jpg!uuid2.png! 此种格式的字符串, 每个文件名用" ! " 分隔开, , 最后一个" ! " 不可少方便前台分割, 截取等操作.
import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.PrintWriter;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.ExceptionHandler;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MaxUploadSizeExceededException;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;/*** 文件处理控制器controller* * @author yufu* @email ilxly01@ -7-15*/@Controller@RequestMapping(value = "/security/filegags")public class FilegagsController {private static final Logger log = LoggerFactory.getLogger(FilegagsController.class);// 上传文件最大值@Value("${LoadUpFileMaxSize}")String LoadUpFileMaxSize;// 上传文件保存路径@Value("${uploadPath}")String uploadPath;/*** 多文件上传接收方法* * @param request* @return* @throws IOException*/@RequestMapping(value = "/upload", method = RequestMethod.POST)@ResponseBodypublic Map<String, String> aadd_worker(MultipartHttpServletRequest multipartRequest,HttpServletResponse response) throws IOException {response.setContentType("text/html;charset=utf-8");String result = "success!";Map<String, String> map = new HashMap<String, String>();// 1-获取多个文件for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {// a-将读取到的单个文件保存到服务器的 uploadPath 路径下String key = (String) it.next(); // 文件名log.info("key: " + key);MultipartFile multipartFile = multipartRequest.getFile(key); // 根据key得到文件if (multipartFile.getOriginalFilename().length() > 0) {String originalFileName = multipartFile.getOriginalFilename();// b-截取后缀, 重命名文件, 使用uuid+后缀的方式命名保存到服务器上的文件String suffix = originalFileName.substring(originalFileName.lastIndexOf("."));log.info("文件后缀: " + suffix);// KitService.getUUID() 为自己写的自动生成一个UUID方法, 您可以自己写String fileName = KitService.getUUID() + suffix;log.info("新文件名: " + fileName);try {String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(uploadPath);log.info("保存文件路径: " + uploadFileUrl);// c- 将文件保存到目标目录下File uploadFile = saveFileFromInputStream(multipartFile.getInputStream(), uploadFileUrl,fileName);if (uploadFile.exists()) {log.info(originalFileName + "上传成功");} else {log.info(originalFileName + "上传失败");throw new FileNotFoundException("file write fail: "+ fileName);}} catch (Exception e) {// TODO Auto-generated catch blocklog.info(originalFileName + "上传失败");e.printStackTrace();}result += fileName + Constants.STRING_SPILIT;}}// response.getWriter().write(result);map.put("notice", result);return map;}/*** 上传图片超出最大值时, 弹出的异常* * @param ex* @param request* @return* @throws IOException*/@ExceptionHandler(Exception.class)public void handlerException(Exception ex, HttpServletRequest request,HttpServletResponse response) throws IOException {response.setContentType("text/html;charset=utf8");String notice = "error";if (ex instanceof MaxUploadSizeExceededException) {notice = "文件大小不超过"+ getFileMB(((MaxUploadSizeExceededException) ex).getMaxUploadSize());} else {notice = "上传文件出现错误,错误信息:" + ex.getMessage();}PrintWriter writer = response.getWriter();writer.write(notice);}/*** 字节转为MB 方法* * @param byteFile* @return*/private String getFileMB(long byteFile) {if (byteFile == 0) {return "0MB";}long mb = 1024 * 1024;return "" + byteFile / mb + "MB";}// 保存文件到指定路径private File saveFileFromInputStream(InputStream stream, String path,String filename) {// 检查保存上传文件的文件夹是否存在File dirFile = new File(path);if (!dirFile.exists()) {dirFile.mkdir();}File file = null;FileOutputStream fs = null;try {file = new File(path + "/" + filename);fs = new FileOutputStream(file);byte[] buffer = new byte[1024 * 1024];int bytesum = 0;int byteread = 0;while ((byteread = stream.read(buffer)) != -1) {bytesum += byteread;fs.write(buffer, 0, byteread);fs.flush();}fs.close();stream.close();} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} finally {try {if (fs != null) {fs.close();}if (stream != null) {stream.close();}} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}return file;}}
前台部分:
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@page contentType="text/html" pageEncoding="UTF-8"%><%@ taglib uri="/jsp/jstl/core" prefix="c"%><c:set var="contextPath" value="${pageContext.request.contextPath}" /><html xmlns="/1999/xhtml"><head><title>自定义带缩略图的文件上传</title><!-- 上传图片 begin, 可从本文章最顶部下载 --><link rel="stylesheet" type="text/css" href="${contextPath}/js/lib/diyUpload/css/webuploader.css" /><link rel="stylesheet" type="text/css" href="${contextPath}/js/lib/diyUpload/css/diyUpload.css" /><!-- 此css样式在本页中 --><link rel="stylesheet" type="text/css" href="${contextPath}/css/cs.css" /><script type="text/javascript" src="${contextPath}/js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/js/webuploader.html5only.min.js"></script><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/js/diyUpload.js"></script><!-- 上传图片 end, 可从本文章最顶部下载 --><!-- 此脚本为抽取出来的上传脚本, 可自定义. --><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/cs-belong.js"></script></head><body><!-- 预览可能已经存在的图片的div -->执照扫描件:<div id="fileBlShow"></div><!-- 上传按钮 --><div id="fileBlUpload"></div><!-- 保存实际图片名字符串的隐藏域 , value值是从后台传递过来的, 例如上文所说的 uuid1.jpg!uuid2.png! 此种格式的字符串, 每个文件名用" ! " 分隔开, 最后一个" ! " 不可少--><input type="hidden" id="fileBl" name="fileBl" value="uuid1.jpg!uuid2.png!" /><!-- 遮罩层 大图显示图片div begin --><div id="bgDiv"></div><div id="imgShowDiv"></div><!-- 遮罩层 大图显示图片div end --><script type="text/javascript">$(document).ready(function(){//初始化可能已经存在的图片initImg('fileBlShow','${company.fileBl}','fileBl');//初始上传按钮initUploadfile('fileBlUpload','上传按钮','fileBl');});</script></body></html>
上述html中涉及到的cs.css和cs-belong.js
cs.css
* {font-size: 14px;}body,input,textarea {font-family: 微软雅黑, helvetica, tahoma, verdana, sans-serif;padding: 0;margin: 0;}/*** 预览图片列表div样式**/.preImgList{}.preImgList img{margin: 3px 5px;border: 2px solid rgb(108, 125, 247);padding: 4px;background: white;}/*** 弹出div窗口样式**/#bgDiv{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index: 1001;-moz-opacity: 0.7;opacity: .70;filter: alpha(opacity = 70);}#imgShowDiv{display: none;position: absolute;top: 1%;left: 1%;width: 95%;height: 93%;padding: 8px;border: 8px solid #E8E9F7;background-color: white;z-index: 1002;overflow: auto;text-align: center;}#imgShowDiv input{width: 50px;float: right;background-color: #358BFF;font-size: 16px;font-weight: bold;color: white;}
cs-belong.js
/** *项目独有的 初始化上传空间, 图片显示, 删除等功能方法**//*** 初始化上传图片路径* id-按钮控件的id, 只所以加上这个参数, 是因为原来的项目中 一个页面有多个上传按钮存在的缘故* btnValue-上传按钮上的位子* return_input_id-返回的图片id放置的input控件id*/function initUploadfile(btnId,btnValue,returnInputId){$('#' + btnId).diyUpload({url: mon.server + 'security/filegags/upload',success:function( returndata ) {var data = returndata.notice;// 提取提示文字var notice = data.substring(0,data.indexOf('!'));if(notice == 'success'){var result = data.substring(data.indexOf('!') + 1);var preValue = $('#'+returnInputId).val();$('#'+returnInputId).val(preValue + result);}},error:function( err ) {alert('上传图片发生错误, 请刷新页面重新尝试, 或者联系管理员.');},buttonText : btnValue,chunked:true,// 分片大小chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);fileNumLimit:50,fileSizeLimit:500000 * 1024,fileSingleSizeLimit:50000 * 1024,accept: {}});}/*** 处理 存在的图片字符串, 分割, 并使之在前台显示出来~~* containerDiv-存放图片的div* filestr-取出来的图片名称组字符串, 其中是用 | 链接* filelistinput-图片文件名保存的隐藏input id**/function initImg(containerDiv,filestr,filelistinput){// 分割字符串if(filestr == null || filestr == '' || filestr == undefined){return;}var fileNameArray = filestr.split('|');// 循环其中每个文件名, 组装成对应图片路径, 放到对应img的src中var content = '';$.each(fileNameArray,function(index,item){if(item == null || item == undefined || item == ''){}else{//图片, 单击查看, 双击删除content += '<img src="' + mon.server + 'upload/' + item + '" style="width:50px;" onmousedown="operateImg(event,this,\'' + filelistinput + '\')" />';}});$('#'+containerDiv).html(content).addClass('preImgList');}/*** 图片点击事件, 左键查看, 右键删除**/function operateImg(event,obj,filelistinput){// 右键if(event.button=='2'){ delImg(obj,filelistinput);}else{//左键showImg(obj); } }/*** 查看单张图片方法**/function showImg(obj){var content = '<input type="button" value="关闭" onclick="hidediv()"/><br/><img src="' + $(obj).attr('src') + '" />';$('#bgDiv').show();$('#imgShowDiv').html(content).show();}/*** 删除单张图片方法**/function delImg(obj,filelistinput){if(filelistinput == null || filelistinput =='' || filelistinput == undefined){return;}if(!window.confirm('确实要删除该张图片么,此操作不可恢复, 点 “是” 继续删除, 点 “否” 取消。 ')){return;}else{//将对应的图片url从隐藏的input中删除// 1-取得图片名并加上 |var preurl = $(obj).attr('src');//图片urlvar imgname = preurl.substring(preurl.lastIndexOf('/')+1) + '|'; //图片文件名// 2-从 隐藏input中 将imgname 删除掉~~var tt = $('#'+filelistinput).val();var targetvalue = $('#'+filelistinput).val().replace(imgname,'');// 3-新值赋给隐藏input$('#'+filelistinput).val(targetvalue);// 4-将该图片元素去除掉$(obj).remove();}}// 隐藏遮罩层function hidediv() {$('#bgDiv').hide();$('#imgShowDiv').hide();}
以上方法即是上传图片到服务器. 后续操作应该是 保存返回文件名的同时 也将服务器上保存的文件存储到数据库中( 此段代码未添加, 见谅)
有bug或者错误之处欢迎指正. 私信我即可.
