springMVC fromdata表单上传文件+ajax ajaxSetup loading效果
来源：互联网 发布：mac 储存 应用 编辑：程序博客网 时间：2024/06/07 12:02
基于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.htmloading效果引用的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 })@ResponseBodypublic 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";}好啦 一个简单的上传就完成了 比较简陋0 0
- springMVC fromdata表单上传文件+ajax ajaxSetup loading效果
- FromData提交表单及上传文件
- ajax+fromData 上传图片
- springmvc Ajax表单上传文件案例
- React基于FromData+Ajax的表单提交
- struts2通过FromData+ajax实现文件上传（页面无刷新）
- ajax上传带文件的form表单，springmvc接收
- SpringMvc + ajax 文件上传
- Ajax SpringMVC 上传文件
- springMvc Ajax 文件上传
- 文件上传+ajax 实现表单文件上传
- form表单，AJAX上传文件
- Ajax表单提交上传文件
- 表单/ajax上传excel文件
- ajax from表单上传文件
- SpringMVC+ajaxfileupload+ajax文件上传
- SpringMVC Ajax上传文件实例
- SpringMVC和ajax文件上传
- rails callback介绍
- Android Bitmap保存 以及 屏幕截取工具类
- 【2016东莞信息特长生】字串距离
- Maven在默认的源码包的基础上增加自己定义的源码包
- OpenStack基础原理
- springMVC fromdata表单上传文件+ajax ajaxSetup loading效果
- highcharts图表 去掉highcharts的logo 改变y轴的刻度 改变背景颜色 去掉图例
- 外贸电商：除了paypal，这些支付方式也能帮到你！
- Android内存优化 OOM
- .net一般应用处理程序
- Android SQLite数据库版本升级原理解析
- Android打开系统拍照&相册获取头像
- Persona 人物角色
- jquery 如何动态添加、删除class样式方法介绍
