uploadify在SpringMVC下的使用示例

1、引入uploadify的css和js文件

 

 

<%
	String path = request.getContextPath();
%>

<link rel="stylesheet" href="<%=path%>/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="<%=path%>/uploadify/jquery.uploadify-3.1.min.js"></script>

 

 2、配置相关参数和函数

     注意：$('#importLispDialog').window('close'); 要在 onUploadComplete 事件中执行，不能在onUploadSuccess里面执行。否则上传完成的文件不会消失。

字段非空的验证要在提交前验证，不能在onUploadStart里验证，否则即使为空，返回false，上传操作仍然会执行

 

<script type="text/javascript" charset="UTF-8">
	var name;    
        var content;
	$(function() {
		$("#file_upload").uploadify({
	    	'height'        : 27, 
	    	'width'         : 80,  
	    	'buttonText'    : '添加附件',
	        'swf'           : '<%=path%>/uploadify/uploadify.swf',
	        'uploader'      : '<%=path%>/uploadController.do?upload',
	        'auto'          : false,
	        'fileTypeExts'  : '*.*',
	        'formData'      : {'userName':'','content':''},
	        'onUploadStart' : function(file) {
	            $("#file_upload").uploadify("settings", "formData", {'userName':name,'content':content});
	        },
	        'onUploadSuccess':function(){
	        	$.messager.show({
					msg : '导入成功！',
					title : '提示'
				});
	        },
	        'onUploadComplete':function(){
	        	$('#importLispDialog').window('close');
	        }
	    });

	});

	function startUpload(){
		//校验   
         name=$('#userName').val();    
         content=$('#content').val();
         if(name.replace(/\s/g,'') == ''){   
              alert("姓名不能为空！"); 
              return false;  
         }else{
        	 $('#file_upload').uploadify('upload','*');
         } 
	}
</script>

 

 3、添加file框和超链接

 

<input type="file" name="uploadify" id="file_upload" />
<hr>
<a class="easyui-linkbutton" onclick="startUpload();" href="javascript:void(0);">开始上传</a> 
<a href="javascript:$('#file_upload').uploadify('cancel', '*')" class="easyui-linkbutton">取消所有上传</a> 

 

 4、后台取值，基于SpringMVC

注意创建文件夹要用 file.mkdirs();不能用 file.mkdir();否则在linux下运行失败 

 

 

@RequestMapping(params = "upload")
public String upload(HttpServletRequest request, HttpServletResponse response){
		
	String responseStr="";
	MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
	//获取前台传值
	String[] userNames = multipartRequest.getParameterValues("userName");
	String[] contents = multipartRequest.getParameterValues("content");
	String userName="";
	String content="";
	if(userNames!=null){
		userName=userNames[0];
	}
	if(contents!=null){
		content=contents[0];
	}
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();  
        //String ctxPath = request.getSession().getServletContext().getRealPath("/")+ "\\" + "images\\";  
        String ctxPath=request.getSession().getServletContext().getRealPath("/")+configPath; 
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
	String ymd = sdf.format(new Date());
	ctxPath += ymd + "/";
	//创建文件夹
        File file = new File(ctxPath);  
        if (!file.exists()) {  
            file.mkdirs();  
        }  
        String fileName = null;  
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {  
            // 上传文件名  
            // System.out.println("key: " + entity.getKey());  
            MultipartFile mf = entity.getValue();  
            fileName = mf.getOriginalFilename();
            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
			
			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
			String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
            File uploadFile = new File(ctxPath + newFileName);  
            try {
	    		FileCopyUtils.copy(mf.getBytes(), uploadFile);
			responseStr="上传成功";
	    } catch (IOException e) {
			responseStr="上传失败";
			e.printStackTrace();
	    }  
        } 
		return null;
}

 

5、Spring配置文件

	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding">
			<value>UTF-8</value>
		</property>
		<property name="maxUploadSize">
			<value>32505856</value><!-- 上传文件大小限制为31M，31*1024*1024 -->
		</property>
		<property name="maxInMemorySize">
			<value>4096</value>
		</property>
	</bean>

 

评论

6 楼 javazf 2014-02-20  

javazf 写道

楼主，问个问题，如下：
最近遇到一个多附近上传和表单域一起提交问题，就是说文件和前台表单域的值一起提交到后台，文件进行保存，表单域的值入数据库。
现在有个问题，如果我不选择文件，无法触发
'uploader'      : '<%=path%>/uploadController.do?upload', 不能将表单域的值入库。

楼主有什么好的解决办法吗？

我的上传文件和表单域的值入库在同一个方法里面

5 楼 javazf 2014-02-20  

楼主，问个问题，如下：
最近遇到一个多附近上传和表单域一起提交问题，就是说文件和前台表单域的值一起提交到后台，文件进行保存，表单域的值入数据库。
现在有个问题，如果我不选择文件，无法触发
'uploader'      : '<%=path%>/uploadController.do?upload', 不能将表单域的值入库。

楼主有什么好的解决办法吗？

4 楼 tianzhijie11 2013-12-07  

我用的是springmvc但跳转后 上传图片的按钮不能使用，点不出弹出框，我不知道哪里错了，想下载看看你的，谁知道是个系统文件，没看到你的配置。

3 楼 smilease 2013-11-24  

water6000 写道

原本以为是你的原文件，结果你却发了个系统文件 ，有啥用啊！

我用到的代码已经都写在博客里了

2 楼 water6000 2013-07-18  

原本以为是你的原文件，结果你却发了个系统文件 ，有啥用啊！

1 楼 w203654 2012-10-12  

好用，一次就会用了