jQuery uploadify 3.2

learnjavaavaj

浏览: 15931 次
性别:

最近访客更多访客>>

zhijun0592

gggfff39

大龙湖东哥

hotusm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

感谢原创 http://18810098265.iteye.com/blog/1972538

uploadify目前最新版是3.2.1, 官网上介绍的资料是使用index.php,而没有介绍在jsp上的上传, 在网上搜到的资料是关于版本较低的,跟这个版本用法不一样了, 下载后解压就是这样:

项目中的结构

1.jsp上引入css和js, uploadify还需要引入jquery

 <head>  
  <link href="../uploadify/uploadify.css" rel="stylesheet" type="text/css" />   
 <script type="text/javascript" src="../control/jquery-1.9.0.min.js" ></script>  
 <script type="text/javascript" src="../uploadify/jquery.uploadify.min.js"></script>  
 </head>  
 <body>  
 <input type="file" id="uploadify" name="uploadify">  
  <div id="fileQueue"></div>  
   <a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>  
  <a href="javascript:$('#uploadify').uploadify('cancel')">取消所有上传</a>  
</body>

2.页面上的js, 在页面加载的时候执行

 <script type="text/javascript">
  window.onload=function(){
     upVideo();
  }

   function upVideo(){
 		$("#uploadify").uploadify({  
			'auto'           : false, //选完文件后是否自动上传 
			'swf'            : '../uploadify/uploadify.swf',  //引入uploadify.swf
			'uploader'       : 'struts2的action请求路径',//请求路径
			'queueID'        : 'fileQueue',//队列id,用来展示上传进度的  
			'queueSizeLimit' : 3,  //同时上传文件的个数
			'fileTypeDesc'   : '视频文件',  
			'fileTypeExts'   : '*.avi;*.rmvb;*.wmv;*.mp4', //控制可上传文件的扩展名
			'multi'          : true,  //允许多文件上传
			'buttonText'     : '上传视频',//按钮上的文字
			'fileSizeLimit' : '200MB', //设置单个文件大小限制 
			'fileObjName' : 'uploadify',  //<input type="file"/>的name
			'method' : 'post',
			'removeCompleted' : true,//上传完成后自动删除队列
			'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发
	                               //data就是action中返回来的数据
                                       文件传上去后,你可以把文件的名称等信息写回来, 把值赋给隐藏的input,再提交过去将文件的路径等其他信息存到数据库,实现异步上传,而且你还可以在这里动态创建一个删除按钮, 点击时发送ajax请求,把文件名发送过去,把刚上传的视频删了
			},
			'onQueueComplete' : function(){//所有文件上传完成
				
			}
		});  
 					
 	}

3,完成上面两步, 而且你的浏览器安装了flash插件,会有如下效果

这里有点小问题, 我的队列上有个X可以点击,你的可能没有,但是还是可以点,也能取消,就是少了个X图标,这应该是这个版本的一个bug,解决办法:
打开uploadify.css, 查找"uploadify-queue-item", 我的是在73行,如下:

.uploadify-queue-item .cancel a {
	background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
	float: right;
	height:	16px;
	text-indent: -9999px;
	width: 16px;
}

把url('../img/uploadify-cancel.png')这个改成url('uploadify-cancel.png'), 因为这个uploadify-cancel.png文件和css文件在同一个目录下,'../img/uploadify-cancel.png'找不到图片所以页面上没有X

5,当你选择的文件大小超出范围,uploadify会弹出提示,但提示是英文的,提示"The File..."什么的,解决办法是直接打开jquery.uploadify.js(你引得是jquery.uploadify.min.js就打开jquery.uploadify.min.js), 搜索"The File" 直接把相应英文替换为中文即可,反正提示什么英文你就搜什么呗,然后改, 注意清缓存,我清了好几遍才出来中文.

6.struts2的配置
这个不多说什么, 注意一点, 一定加上这个常量,不然超过2M的文件就传不了,队列里会报错
Http Error 404神马的

  <constant name="struts.multipart.maxSize" value="2000000000" ></constant>

7.action代码

        //三个接收文件的字段,与页面上的name,uploadify的'fileObjName'属性一致
        private File uploadify;
	private String uploadifyFileName;
	private String uploadifyContentType;
       
     //我是以当前时间+"__"+文件名作为新的文件名放到项目的videos文件夹中 
     public void uploadVideo() throws Exception{
    	ServletContext context = ServletActionContext.getServletContext();
    	String savePath = context.getRealPath("/videos");  
    	HttpServletResponse response = ServletActionContext.getResponse();  
    	response.setCharacterEncoding("utf-8");  
    	String name = new Date().getTime()+"__"+uploadifyFileName;
    	savefile(uploadify,savePath,name,10485760);
    	uploadify.delete();//删除临时文件,tomcat的work目录下会有临时文件,得删掉
    	response.getWriter().print(name);//把新的文件名发回到页面,用个隐藏的input标签记下这个文件名,等页面提交的时候把这个文件名再带过来,加上路径,就是视频的路径存到数据库
    }

        //保存文件
	public boolean savefile(File file, String path, String filename, int size) {
		boolean bool = true;
		try {
			InputStream is = new FileInputStream(file);
			OutputStream os = new FileOutputStream(path + "\\" + filename);
			byte[] bytefer = new byte[size];
			int length = 0;
			while ((length = is.read(bytefer)) != -1) {
				os.write(bytefer, 0, length);
			}
			os.close();
			is.close();
		} catch (Exception e) {
			bool = false;
		}
	
		return bool;
	}

到这里,就已经完成了视频的上传, 只不过上传完了, 我发现我传错了, 我想把刚才传的视频删了, 这个怎么搞了?我已经在js中留了两个回调函数,第一个回调函数就可以实现

第二个回调函数可以干嘛了?它是在所有文件传完了触发,所以利用它可以阻止下面这种情况:文件还正在上传,别人就要提交表单, 这时你应该提示文件正在上传,请稍后提交, 所以你可以再页面弄个隐藏的input,值是0, 然后在这个回调函数中将值改为1, 然后提交的时你就判断这个值, 是0就是还没传完,1就是传完了