YUI uploader 使用笔记

最新推荐文章于 2016-03-01 14:29:00 发布

iteye_7652

最新推荐文章于 2016-03-01 14:29:00 发布

阅读量166

点赞数

分类专栏：工作文章标签： YUI Flash Yahoo Ajax IE

工作专栏收录该内容

15 篇文章 0 订阅

订阅专栏

YUI uploader组件,还是实验版本.他是用flash模拟文件选择框,js与flash交互进行多文件上传.
需要Flash Player 9.0.45或者更高版本.
由于flash自己的bug,在firefox下,会把ie的cookies传递到server端,所以.如果应用依赖cookies.有两种办法解决:1.不要依赖;2.通过上传url传递.
以下为demo:
1.引入必须的js文件


<!-- Dependencies --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script> 

<!-- Source files --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/uploader/uploader-experimental-min.js"></script>

2.html


<!-- flash容器 -->
<div id="multi:container" style="width:0px;height:0px"></div>
<div id="multi:file">请选择图片...</div>
<button type="button" id="multi:select">浏览...</button>
<button type="button" id="multi:up">上传</button>

3.js代码


<script type="text/javascript">
		(function(){
		var D = YAHOO.util.Dom;
		var E = YAHOO.util.Event;

		//swf的时间戳是为了让其在傲游下可用(傲游貌似会错误的缓存flash文件,具体原因不明).各位看官有其他解决办法,请告知.
		//这里指定的flash在yahooapi domian上.要操作提交数据到你自己的site上,需要自己的site根目录下有crossdomain.xml文件,详情google crossdomain.xml
		YAHOO.widget.Uploader.SWFURL = 'http://yui.yahooapis.com/2.5.2/build/uploader/assets/uploader.swf?t='+ new Date().getTime();
		var uploader = new YAHOO.widget.Uploader('multi:container');

		//选择框事件绑定
		E.on('multi:select','click', function(ev){
			uploader.browse(true,[{description:'图片',extensions:'*.jpg;*.png;*.pneg;*.gif'}]);
		});

		//上传事件绑定
		E.on('multi:up','click', function(ev){
			// uploader上传函数,具体参数解释详见yui文档
			//uploader.uploadAll('http://www.site.com/upload.htm','POST',{id:12343});
			for(var fileId in uploader.fileList){
				uploader.upload(fileId,'http://www.site.com/upload.htm','POST',{id:12343});
				//从文件上传文件列表中移除掉已经上传成功的图片.还有一个api uploader.clearFileList().根据自己情况选用
				uploader.removeFile(fileId);
			}
		}};

		//uploader提供了很多的回调.都是通过注册监听事件的方式来处理的.常用的有,选择图片时fileSelect,上传图片的过程中uploadProgress,上传完毕uploadCompleteData,上传失败时uploadError等.
		//以下注册几个回调.处理页面逻辑
		uploader.addListener('fileSelect',function(ev){
			//ev为回调参数,每一个回调,回调参数不同.请查看YUI uploader文档
			//根据选中的图片,生成html.其中,ev.fileList是一个json,不是数组,key是文件的唯一性id,表现为file1这种形式.value就是上传的图片对象本身.其具有的属性,有id,name等.其他属性请自行查阅YUI uploader文档.
			if(ev.fileList){
				var _multi = [];
				for(var fileId in ev.fileList){
						_multi.push(['<div id="cont:'+ fileId  +'"><span>',ev.fileList[name].name,'</span>',
        						'<span id="pro:'+ fileId  +'">','<img src="http://hk.l.yimg.com/us.yimg.com/lib/ks/hk/i8_staging/generic_bar.gif" style="width:0;height:21px;">',
        						'<ins>0%</ins>',
        						'</span><a href="#" class="cacle:up" params:id="'+ fileId  +'">X</a></div>'
        						].join(''));			

				}
				//根据选中的图片,dom操作生成html
				var container = D.get('multi:file');
				container.innerHTML = _multi.join(' ');
				//注册删除事件
				E.on(D.getElementsByClassName('cacle:up','a',container), 'click', function(ev){
					 var row = D.get('cont:'+ fileId);
					 var fileId = this.getAttribute('params:id');
       					 if(row && fileId){
						 container.removeChild(row);
						 uploader.removeFile(fileId);
       					}
       					E.stopEvent(ev);
       				},fileId);
			}
		}};

		//上传中
		uploader.addListener('uploadProgress',function(ev){
			if(ev.id){
				var proId = 'pro:'+ev.id;
    				var percent = parseInt((ev.bytesLoaded / ev.bytesTotal) * 100);
    				D.setStyle(D.getFirstChild(proId),'width',percent*0.12+'em');
    				D.getLastChild(proId).innerHTML = percent+'%';
			}
		});

		//上传完毕
		uploader.addListener('uploadCompleteData',function(ev){
			//上传完毕,做一些毁掉处理.类似于ajax的数据填充
			//ev.data 类似于ajax中的ev.responseText
		});

		//上传失败
		uploader.addListener('uploadError',function(ev){
			var cont = D.get('cont:'+ev.id);
			if(cont){
				cont.innerHTML = '<span class="error">上传图片失败</span>';
			}
		});	

	})();

</script>