当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

YUI uploader 使用笔记

发表于: 2008-08-07   作者:dogstar   来源:转载   浏览次数:
摘要: YUI uploader组件,还是实验版本.他是用flash模拟文件选择框,js与flash交互进行多文件上传. 需要Flash Player 9.0.45或者更高版本. 由于flash自己的bug,在firefox下,会把ie的cookies传递到server端,所以.如果应用依赖cookies.有两种办法解决:1.不要依赖;2.通过上传url传递. 以下为demo: 1.引入必须的js
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>

以上是项目中用到YUI uploader所写代码的精简版本.实际的代码因为业务的要求,非常复杂.其中,注意事项都于上表述.有问题请详细查阅YUI uploader文档.如下:
see aslo: http://developer.yahoo.com/yui/uploader/

YUI uploader 使用笔记

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
声明:本文内容大部分翻译自YUI 文档,加上一些个人的理解。 YUI CSS 由四个部分组成: Reset, Base
Attribute类用于向一个类添加属性,它给类增加了set和get函数用于操作属性值,同时还 支持change事件
参考资料:http://yuilibrary.com/yui/docs/resize/simple-resize.html 需求说明:用鼠标控制div的
1、web uploader官网 2、WebUploader包文件 3、在页面引入webuploader的js文件 <!--引入上传组件
作者:zccst 2014-12-04 重复提交时的bug (1)除file字段外的其他字段多次重复添加时出现重复。 需
Fine Uploader文件上传组件 2013-01-04 19:16 by chenkai, 300 阅读, 0 评论, 收藏, 编辑 最近在处
最近,项目中需要用到yui的datatable组件来做报表的展现。碰到了一些问题,把这些问题的解决方案写下
至于为什么要用YUI Compressor Maven 插件对js,css 进行压缩,这个相信大家都已经懂了,在这就不多
都说YUI强大 ,却连行分组样式都没有,上网搜索了好久找到个别人写的行分组“datatablegrouper”。
有段时间做开发前台,使用到了YUI。YUI提供了很多实用的工具和组件,不过在工作中只使用到了很少的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号