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 官方說明
回應 (Leave a comment)