导读:
早就知道YUI里面有Uploader这么一个上传组件,可以按住ctrl多选文件上传(就像flickr那样的上传),并且可以支持进度条,这样对用户来说是相当方便的。
由于YUI Uploader是利用javascript + flash实现的,所以用户的浏览器上只要有flash player就可以使用,也不需要额外安装别的插件了,这显然也是YUI Uploader的一大优势。
我的YUI Uploader试用之旅
首先下载Uploader批量上传页的html源文件
解压后放置在你的web服务器上,比如我就是在自己的台式机上安装了一个xampp
现在需要一个处理上传操作的后端程序,在这里我是用php简单的写了一个,如果你用别的语言也是不成问题的。在 uploader-advanced-source.html的同一目录下放置 upload.php,源文件如下:
PHP:
foreach ($_FILESas$fieldName=> $file ) {
$name= md5 (microtime ( ) )
move_uploaded_file ($file ['tmp_name' ], "./". $name. '.jpg' )
echo$fieldName. ' uploaded!'
}
下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf,然后把 uploader.swf放在和 upload.php的同一目录下,这是为了避免javascript和flash交互过程中出现跨域问题。
修改uploader-advanced-source.html
把"YOUR UPLOAD URL GOES HERE"替换成你的upload.php所在的url,比如我的就是http://localhost/yui/upload.php
把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
现在访问uploader-advanced-source.html,试试批量上传功能吧
试用的一点补充
这个例子里面的php源文件只是考虑上传n张jpg文件的情况,可根据实际情况调整。
上传后的文件名是md5随机加密的,在upload.php同一目录可见
由于flash的bug,运行在windows下的firefox无法正确获得flash传递过来的cookie,如果上传应用对cookie有依赖,可能会需要做额外的处理。
为了能够确切的显示上传进度条,可能需要php 5.2的apc扩展支持
上传进度由flash完成
YUI 2.5.2已经附上uploader.swf的actionscript,有一定的学习价值
贴一张Uploader使用效果图
作者: volcano发表于5月 30, 2008 at 9:58 am
版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处 和作者信息 及此声明
本文转自
http://www.ooso.net/index.php/archives/405
早就知道YUI里面有Uploader这么一个上传组件,可以按住ctrl多选文件上传(就像flickr那样的上传),并且可以支持进度条,这样对用户来说是相当方便的。
由于YUI Uploader是利用javascript + flash实现的,所以用户的浏览器上只要有flash player就可以使用,也不需要额外安装别的插件了,这显然也是YUI Uploader的一大优势。
我的YUI Uploader试用之旅
首先下载Uploader批量上传页的html源文件
解压后放置在你的web服务器上,比如我就是在自己的台式机上安装了一个xampp
现在需要一个处理上传操作的后端程序,在这里我是用php简单的写了一个,如果你用别的语言也是不成问题的。在 uploader-advanced-source.html的同一目录下放置 upload.php,源文件如下:
PHP:
foreach ($_FILESas$fieldName=> $file ) {
$name= md5 (microtime ( ) )
move_uploaded_file ($file ['tmp_name' ], "./". $name. '.jpg' )
echo$fieldName. ' uploaded!'
}
下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf,然后把 uploader.swf放在和 upload.php的同一目录下,这是为了避免javascript和flash交互过程中出现跨域问题。
修改uploader-advanced-source.html
把"YOUR UPLOAD URL GOES HERE"替换成你的upload.php所在的url,比如我的就是http://localhost/yui/upload.php
把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
现在访问uploader-advanced-source.html,试试批量上传功能吧
试用的一点补充
这个例子里面的php源文件只是考虑上传n张jpg文件的情况,可根据实际情况调整。
上传后的文件名是md5随机加密的,在upload.php同一目录可见
由于flash的bug,运行在windows下的firefox无法正确获得flash传递过来的cookie,如果上传应用对cookie有依赖,可能会需要做额外的处理。
为了能够确切的显示上传进度条,可能需要php 5.2的apc扩展支持
上传进度由flash完成
YUI 2.5.2已经附上uploader.swf的actionscript,有一定的学习价值
贴一张Uploader使用效果图
作者: volcano发表于5月 30, 2008 at 9:58 am
版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处 和作者信息 及此声明
本文转自
http://www.ooso.net/index.php/archives/405