Spring MVC 结合Ajax实现文件上传(使用ajaxfileupload.js)

losetowin 发布于:2013-12-30 9:59 分类:Java  有 47779 人浏览,获得评论 83 条 标签: Spring Ajax ajaxfileupload 

本文地址:http://www.dutycode.com/post-6.html
除非注明,文章均为 www.dutycode.com 原创,欢迎转载!转载请注明本文地址,谢谢。

更多Spring相关文章,猛戳这里---》 http://www.dutycode.com/tag/Spring

SpringMVC实现文件上传,直接上代码:

后台代码:

	@RequestMapping(value = "/uploadApk")
	@ResponseBody
	public Object uploadApk(
			@RequestParam(value = "apkFile") MultipartFile apkFile,
			HttpServletRequest request, HttpServletResponse response) {
		Map<String,Object> resMap = new HashMap<String,Object>();
		if (apkFile != null) {
			//获取保存的路径,
			String realPath = request.getSession().getServletContext()
					.getRealPath("/upload/apk");
			if (apkFile.isEmpty()) {
				// 未选择文件
				resMap.put("status", StatusConstants.STATUS_PARM_IS_EMPTY);
			} else{
				// 文件原名称
				String originFileName = apkFile.getOriginalFilename();
				try {
					//这里使用Apache的FileUtils方法来进行保存
					FileUtils.copyInputStreamToFile(apkFile.getInputStream(),
							new File(realPath, originFileName));
					resMap.put("status",StatusConstants.STATUS_OK);
				} catch (IOException e) {
					System.out.println("文件上传失败");
					resMap.put("status", StatusConstants.STATUS_EXECPTION);
					e.printStackTrace();
				}
			}

		}
		return resMap;
	}

 

Spring配置文件中需要添加如下内容:

    <!-- SpringMVC上传文件时,需配置MultipartResolver处理器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 指定所上传文件的总大小不能超过80M......注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
        <property name="maxUploadSize" value="80000000"/>
    </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_fileupload</prop>
            </props>
        </property>
    </bean>

 

jsp页面内容(这里结合的EasyUi的一些内容):

function ajaxFileUpload(){
	//获取软件更新详情
	var apkIntroduce = $("#apkInfo").val();
	//开始上传文件时显示一个图片,文件上传完成将图片隐藏
	//$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
	//执行上传文件操作的函数,使用encodeURI方法,防止传输中文字符的时候出现乱码
	var uploadUrl = encodeURI(encodeURI(basePath + "uploadApk.do?apkIntroduce="+apkIntroduce));
	$.ajaxFileUpload({
		//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
		url:uploadUrl,
// 		url:basePath + "uploadApk.do?apkIntroduce="+apkIntroduce,
		secureuri:false,                       //是否启用安全提交,默认为false 
		fileElementId:'apkFile',           //文件选择框的id属性
		dataType:'text',                       //服务器返回的格式,可以是json或xml等
		success:function(data, status){        //服务器响应成功时的处理函数
			data = data.replace("<PRE>", '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
			data = data.replace("</PRE>", '');
			data = data.replace("<pre>", '');
			data = data.replace("</pre>", ''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
			
			//将String字符串转换成json
			var dataset = $.parseJSON(data);
			if(dataset.status == "ok"){
				$('#result').html("Apk上传成功<br/>");
				$.messager.alert("提示","上传成功");
				
				//关闭添加窗口
				addApkWindow.window('close');
				//刷新页面
				datagrid.datagrid('reload');
				
			}else if ( dataset.status == "parm_is_empty"){
				$('#result').html("没有选择APK!");
			}else {
				$('#result').html('Apk上传失败,请重试!!');
			}
		},
		error:function(data, status, e){ //服务器响应失败时的处理函数
			console.log(e);
			console.log(data);
			$('#result').html('APK上传失败,请重试!!');
		}
	});
}

Html页面代码:

	<div id="addApkWindows">
	
	<!-- http://www.open-open.com/lib/view/open1379579369943.html -->
		<div id="result"></div>
<!-- 		<img id="uploadImage" src="http://www.firefox.com.cn/favicon.ico"> -->
		软件更新详情:<br/>
		<textarea rows="2" cols="30" id="apkInfo"></textarea>
		<br/>上传文件:<br/>
		<input type="file" id="apkFile" name="apkFile"/><br/>
		<input type="button" value="上传" onclick="ajaxFileUpload()"/>

	</div>

 

 

上面的JSP代码中,使用到了JS中的encodeURI方法,这个的目的是为了防止在传递中文参数时的乱码问题,当然,如果只传文件的话,则没有必要使用encodeURI

 

参考网址:

1、http://blog.csdn.net/jadyer/article/details/11693705

2、http://www.open-open.com/lib/view/open1379579369943.html

 


PS :更新于 2015-03-31

感谢『XL鹰』的补充--》

注意;
dataType:'text', //服务器返回的格式,可以是json或xml等
这里改成了text不要用json,会有问题,这里改成text后,下面的date就不需要转换了
http://www.oschina.net/question/107380_151555?sort=default&p=2
这里有一条评论讲的很好
sea_wind 为他的用户名,树袋熊的图标的用户讲的

版权所有:《攀爬蜗牛》 => 《Spring MVC 结合Ajax实现文件上传(使用ajaxfileupload.js)
本文地址:https://www.dutycode.com/post-6.html
除非注明,文章均为 《攀爬蜗牛》 原创,欢迎转载!转载请注明本文地址,谢谢。