基于form表单的文件上传
1:基本环境配置
首先导入jar包:
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>
然后在Springmvc.xml 里添加
<!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<!-- 指定所上传文件的总大小不能超过10M。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
<property name="maxUploadSize" value="10240000"/>
</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/500.jsp页面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">500</prop>
</props>
</property>
</bean>
2:前端页面部分
<form:form id="inputForm" modelAttribute="breUploadBlazeFile" method="post" class="form-horizontal" enctype="multipart/form-data"> <div class="control-group"> <label class="control-label" >产品类型:</label> <div class="controls"> <select id="type" style="width: 160px;"> <c:forEach items="${blazeDic}" var="blaze"> <option value="${blaze.key}" >${blaze.value}</option> </c:forEach> </select> </div> </div> <div class="control-group"> <label class="control-label" for="inputfile">包文件:</label> <input type="file" id="inputfile" name="inputfile"> </div> <div class="control-group"> <label class="control-label" for="name" >包描述:</label> <textarea id="decr" class="form-control" rows="3" name="decr" ></textarea> </div> <div id="Box-a"> <button id="btnSubmit" type="button" class="btn btn-info">上传</button> </div> </form:form>
jsp的foreach遍历可以去掉改成普通的下来框就可以
关键的前端代码 因为不是很擅长前端 这部分感觉比较重要enctype="multipart/form-data"
这句是关键
3:js代码部分
ajaxSetup用来设置 Ajax全局加载框(Loading效果)配置
参考:http://www.jb51.net/article/89197.htm
loading效果引用的layui
$(document).ready(function () { $(function () { $.ajaxSetup({ layerIndex:-1, beforeSend: function () { this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] }); }, complete: function () { layer.close(this.layerIndex); }, error: function () { layer.alert('部分数据加载失败,可能会导致页面显示异常,请刷新后重试', { skin: 'layui-layer-molv' , closeBtn: 0 , shift: 4 //动画类型 }); } }); }); $("#btnSubmit").click(function () { var type = $("#type").val(); var decr = $("#decr").val(); var file = $("#inputfile").val(); var length = decr.length; var form = new FormData(document.getElementById("inputForm")); var oImg = $("#inputfile").get(0).files[0]; form.append('file',oImg); form.append('type',type); $.ajax({ type: "post", url: "${ctx}/upload/package", data: form, processData:false, contentType:false, dataType: "json", success: function (data) { if ("success" == data) { window.opener.location.reload() window.close(); } else if ("error" == data) { alertx("服务器异常!"); } else{ alertx(data); } } }); }); });
jquery的FormData这里是处理整个表单上传的核心所在
4:后端controller接收处理
@OperationLog(description = "上传文件")//自定义操作日志注解(去掉即可) @RequestMapping(value = "package", method = { RequestMethod.POST }) @ResponseBody public String uploadPackage(String type, String status, String decr, @RequestParam(value = "file", required = true) MultipartFile file, HttpServletRequest request) { Long startTime = System.currentTimeMillis(); if (file == null || file.isEmpty()) { logger.error("上传文件接口,上传文件内容为空。上传文件参数type={},status={},decr={}", type, status, decr); return "error"; } // 原始名称 String originalFilename = file.getOriginalFilename(); logger.debug("上传文件接口,上传文件参数type={},status={},decr={},文件名称={}", type, status, decr, originalFilename); try { String creater = new UserBasicInfo(request).getUserName(); blazeFileHandleService.uploadBlazeFile(type, status, originalFilename, decr, creater, null, file.getBytes()); logger.info("上传文件接口,上传文件成功。参数type={},status={},decr={},文件名称={},创建人={}", type, status, decr, originalFilename, creater); } catch (ServiceException se) { logger.error("上传文件接口,业务异常信息=" + se.getMessage(), se); return se.getMsg(); } catch (Exception e) { logger.error("上传文件接口,异常信息=" + e.getMessage(), e); return "error"; } logger.info("[uploadPackage]上传策略文件耗时(毫秒)=" + (System.currentTimeMillis() - startTime)); return "success"; }
好啦 一个简单的上传就完成了 比较简陋