springMVC fromdata表单上传文件+ajax ajaxSetup loading效果

基于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);
                        }
                    }
                });
            });   

        });

扫描二维码关注公众号，回复： 3767891 查看本文章

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

好啦 一个简单的上传就完成了 比较简陋

springMVC fromdata表单上传文件+ajax ajaxSetup loading效果

猜你喜欢