2012
Dec
05
YUI 的档案上传，必需 require uploader 这个 module，也就是使用 YUI().use('uploader')，这个 module 有提供「单一档案选择」、「多个档案选择」、「档案传输」、「进度条」等资讯。
为了完成多个档案选择的功能，YUI 会自动 include HTML5 与 Flash 这两个 YUI Module ，如果你使用的 Browser 有HTML5 的功能，那 YUI 就会使用 HTML5 来实做档案上传的功能，若是你的 Browser 没办法执行 HTML5 的功能，YUI 就会使用 Flash 来实做档案上传，所以从 IE6 以上的 Browser 都可以使用这个 uploader。
YUI uploader 虽然有提供很多资讯，但是没有提供 UI 介面，所以我实做一个有进度条上传档案的 yFileUploader Module。
上传按钮的范例 (选取一个 1MB 左右的档案，就可以比较清楚的看到上传进度条)
程式原始码
第一步是先定义 html tag ，必需给一个按钮的 div 与 进度条的 div ，我分别各给一个 id: btn , progressBar。
定义上传按钮与进度条要出现的 HTML Tag
- <div id="uploaderDemo" style="width:300px;margin:0 auto;">
- <div id="btn"></div>
- <div id="progressBar" ></div>
- </div>
接著 New FileUploader ，必指定按钮与进度条的尺寸，最后要指定一个伺服器接收档案的 url ，我的范例因为不会真的把档案传到伺服器，所以指定一个存在的 html 即可(做假!!)。
New and Render FileUploader button
- <script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
- <script src="/filemanage/blog_files/yFileLoader.js"></script>
- <script>
- YUI().use("node","yFileUploader" , function(Y){
- if (Y.Uploader.TYPE != "none" && !Y.UA.ios) {
- var url = "/filemanage/blog_files/yFileLoader.js";//server url
- fileUploader = new Y.yFileUploader({
- width: "275px",
- height: "35px",
- progressBarWidth:270,
- progressBarHeight:25,
- progressBarContainer:"#uploaderDemo #progressBar",
- multipleFiles: false,
- swfURL: "http://yui.yahooapis.com/3.7.3/build/uploader/assets/flashuploader.swf?t=" + Math.random(),
- uploadURL: url,
- simLimit: 1,
- withCredentials: false,
- selectButtonLabel:"上传档案",
- container:"#uploaderDemo #btn"
- });
- fileUploader.render("#uploaderDemo #btn");
- }
- });
- </script>
程式下载
- yFileUploader Module Download
- http://yuilibrary.com/yui/docs/uploader/ YUI uploader 官方说明