码迷,mamicode.com
首页 > 编程语言 > 详细

JQuery Uploadify3.2 + SpringMVC 文件上传

时间:2015-03-05 23:48:22      阅读:579      评论:0      收藏:0      [点我收藏+]

标签:

1.引入头文件(jQuery放前面,而且不能有多个JQuery)

     <script type="text/javascript" src="js/jquery-1.6.2.js"></script>  
	 <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">  
     <script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script>  
  </head>
  
   <script >  
      $(document).ready(function() {  
            $("#file_upload").uploadify({  
                    'buttonText' : '请选择',  //上传按钮显示内容,还有个属性可以设置按钮的背景图片
                    'height' : 30,  
                    'swf' : 'js/uploadify/uploadify.swf',  // 控件flash文件位置  
                    'uploader' : 'test/uploadFile.do',   // 后台处理的请求地址,后面追加了jsessionid,用来标示使用当前session(默认是打开新的session,会导致存在session校验的请求中产生302错误)
//                     'upload.action;jsessionid=<%=session.getId() %>', 
//                     'upload.action ;jsessionid=${pageContext.session.id},
                    'cancelImg'      : 'js/uploadify/uploadify-cancel.png', 
                    'width' : 120,  
                    'fileSizeLimit' : '1000KB',  
                 	'multi' : false,  // true 选择多文件上传
                    'auto':false,  // true自动上传
                    'fileObjName'   : 'file',  //文件对象名称,用于后台获取文件对象时使用,详见下面的java代码  
                    'fileTypeExts' : '*.jpg;*.png;*.xls', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc   
//                  'overrideEvents' : ['onDialogClose'],  //不执行默认的onSelect事件
//     	        	'queueID':'file_upload',   //文件选择后的容器ID,与下面HTML的div.id对应    
//     	       		'fileObjName':'myFile',//服务器端脚本使用的文件对象的名称 $_FILES个['upload']
//     	       		'buttonImage':'${pageContext.request.contextPath}/js/jquery.uploadify/uploadify-cancel.png', //浏览按钮的背景图片路径
//     	        	'width':'100',  //浏览按钮的宽度
//     	        	'height':'32',  //浏览按钮的高度
 					'onFallback' : function() {//检测FLASH失败调用  
          				  alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");  
       				},  
                    'onUploadSuccess' : function(file, data, response) {  
                        alert( file.name + ' 上传成功! ');  
                        var obj = eval('('+data+')');	
	           			alert(obj.message);
						// $('#showUploadMsg').html(obj.message);
                    }  
                });  
        });  
     </script>  
其他事件可以查询在线api 地址:  http://www.uploadify.com/documentation/
2. 上传按钮

<body>  
    <input type="file" name="fileName" id="file_upload" />  
    <a href="javascript:$('#file_upload').uploadify('upload', '*')">上传文件</a> | <a href="javascript:$('#file_upload').uploadify('stop')">停止上传!</a>  
  </body>  

3. 后台处理

	@RequestMapping(value = "/uploadFile.do", method = RequestMethod.POST)
	public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,
			HttpServletResponse response) throws IOException {
		
//		System.out.println(file.getOriginalFilename());
		System.out.println("成功!");
		String message = "测试测试";
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write("{\"message\":\"" + message + "\"}");
		response.getWriter().flush();
		return "jsp/index";
	}
下载/资料:

Uploadify官方网站:http://www.uploadify.com/

Uploadify下载:http://download.csdn.net/detail/leixiaohua1020/6376463

demo:链接:http://pan.baidu.com/s/1jGsv4Gm 密码:gcw4

jar : 链接:http://pan.baidu.com/s/1AmNgU 密码:8qn9

手册:链接:http://pan.baidu.com/s/1pJBikCr 密码:or37



JQuery Uploadify3.2 + SpringMVC 文件上传

标签:

原文地址:http://blog.csdn.net/jerome_s/article/details/44087919

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!