jqxfileupload+springmvc上传资源

最新推荐文章于 2024-03-29 04:06:29 发布

weixin_34006468

最新推荐文章于 2024-03-29 04:06:29 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/WangYating/blog/610391

本文介绍如何在SpringMVC中配置文件上传限制，并使用jQuery插件实现前端文件选择、预览及上传功能。具体包括配置最大上传文件大小、上传文件类型限制等。

2019独角兽企业重金招聘Python工程师标准>>>

springmvc配置文件

<!-- 上传文件拦截，设置最大上传文件大小 100M=100*1024*1024(B)=10485760 bytes -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="104857600" />
	</bean>

jquery配置

<script type="text/javascript">
	$(function(){
		var data = {
			jqxFile:{ 
				uploadUrl:"/data/fileUpload.htm",
				autoUpload: false,		//是否自动上传
				accept:".txt,.exe",		//上传文件类型
				browseTemplate:'info',	//上传按钮颜色
				cancelTemplate:'info', //取消按钮颜色
				uploadTemplate:'success',	//上传所有文件按钮颜色
				disabled:false,		//启用或禁用
				fileInputName:"file",
				/* height:'120px',	//高度
				width:'300px',	//宽度 */
				localization:{
					browseButton:'添加',	//添加待上传文件
					uploadButton:'批量上传',	//提交到服务器
					cancelButton:'集合',	//集合
					uploadFileTooltip:'上传文件提示',	//上传文件工具提示
					cancelFileTooltip:'工具提示取消'		//工具提示取消
				},
				multipleFilesUpload:true,	//是否允许批量上传
				/* renderFiles: function (fileName) {		//选择文件后的回掉函数
			        var stopIndex = fileName.indexOf('.');
			        var name = fileName.slice(0, stopIndex);
			        var extension = fileName.slice(stopIndex);
			        return name + '<strong>' + extension + '</strong>';
			    }, */
			    rtl:false,	//true控件偏右，false控件偏左
			    theme:'energyblue'
			}
		}
		$('#jqxFileUpload').jqxFileUpload(data.jqxFile);
	})
</script>

jquery需要引入的js，css

<script type="text/javascript" src="/js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxfileupload.js"></script>	
<script type="text/javascript" src="/js/scripts/demos.js"></script>
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="/js/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.energyblue.css" type="text/css" />

接口

@RequestMapping(value="fileUpload")
	public String fileUpload(@RequestParam MultipartFile[] file){
		
		return "";
	}

转载于:https://my.oschina.net/WangYating/blog/610391