javascript:yahho-uploader
文書の過去の版を表示しています。
JavaScript 1ファイルでプログレスバー付きのファイルアップロードを実装 - Yahho Uploader
更新履歴とコメントはゼロと無限の間のログ » Yahho Uploaderでどうぞ。
The Yahoo! User Interface Library (YUI)を使いやすくラップするYahho!シリーズ。
Yahho Calendarに続く第2弾は、ファイルをアップロードしてアップロードの進捗を表すプログレスバーも表示するYahho Uploader。
必要なのはJavaScriptを1ファイルのみ。バックグラウンドではYUIのJavaScriptをいくつかとSWF(Flash)も使ってるけど、それらはYahoo!のサーバからロードできるので意識しないで済むはず。
サンプル
TODO
ライセンス
Yahho CalendarはMITライセンスで。
YUIの使用はYUIのライセンス(BSDライセンス)に従って。
米Yahoo!からYUIのファイルをロードする場合はServing YUI Files from Yahoo! Serversも要確認。
ダウンロード
TODO
使い方
TODO
(とりあえずnewして設定値をセットしてsetUp()すれば使える)
ソースコード
/** * Yahho Uploader * @see http://0-oo.net/sbox/javascript/yahho-uploader * @version 0.1.1 * @copyright 2008 dgbadmin@gmail.com * @license http://0-oo.net/pryn/MIT_license.txt (The MIT license) */ /** * コンストラクタ */ var YahhoUpl = function() { }; /** * 各種設定 */ YahhoUpl.prototype = { //YUIのURL(@see http://developer.yahoo.com/yui/articles/hosting/ ) YUI_URL: { SERVER: "http://yui.yahooapis.com/" , VERSION: "2.5.2" , DIR: "/build/" } //ファイル選択ダイアログのフィルター , filterText: "JPEG画像" //表示するファイル種類 , filterExtensions: ["jpg", "jpeg"] //選択可能な拡張子 //ファイルをPOSTするフィールド名 , postKey: "Filedata" //ファイルと一緒にPOSTするデータ , postVars: {} //アップロード可能なファイル数 , maxCount: 1 //1ファイル当たりのファイルサイズ制限(単位はMB) , maxSize: 10 //イベント発生時のコールバック関数 , onStart: function(){} //アップロード開始 , onComplete: function(){} //各ファイルのアップロード完了 , onCompleteAll: function(){} //全ファイルアップロード完了 , onError: function(){} //エラー //プログレスバーのスタイル , progressBarStyle: { box: {padding: 0, width: "20em", height: "1em", backgroundColor: "#fff", border: "1px #000 solid"} , bar: {margin: 0, height: "100%", backgroundColor: "#0f0", borderStyle: "none"} } //デバグフラグ , debugFlg: false }; /** * 設定を取り込んでセットアップ * @param String barId プログレスバーのid属性 * @param String uploadUrl アップロード先のURL(yui.yahooapis.comを使う場合はhttpから始まるURLを指定する) */ YahhoUpl.prototype.setUp = function(barId, uploadUrl) { var upl = this.getYUIUploader(); this.upl = upl; var bar = this.getProgressBar(barId); var self = this; //ファイル選択時 upl.addListener("fileSelect", function(ev) { self.totalSize = 0; var cnt = 0; for (var fileId in ev.fileList) { var size = ev.fileList[fileId].size; cnt++; if (cnt > self.maxCount) { alert("アップロードできるファイル数は " + self.maxCount + " ファイルまでです。"); return; } else if (size / 1024 / 1024 > self.maxSize) { alert("アップロードできるファイルサイズは、1ファイルあたり " + self.maxSize + "MB までです。"); return; } //プログレスバーのための準備 ev.fileList[fileId].bytesLoaded = 0; self.totalSize += size; } //プログレスバー表示 bar["bar"].style.width = "0%"; bar["box"].style.display = "block"; upl.uploadAll(uploadUrl, "POST", self.postVars, self.postKey); self.fileList = ev.fileList; self.onStart(ev.fileList); }); //アップロード進行時 upl.addListener("uploadProgress", function(ev) { self.letProgress(ev.id, ev.bytesLoaded, bar); }); //アップロード完了時 upl.addListener("uploadComplete", function(ev) { self.letProgress(ev.id, self.fileList[ev.id].size, bar); //コールバック self.onComplete(ev.id); if (bar["bar"].style.width == "100%") { self.onCompleteAll(); } }); //アップロードエラー時 upl.addListener("uploadError", function(ev) { alert("エラーが発生したためアップロードを中止しました。"); self.onError(); }); //デバグ用(JSONDecoder使用) if (this.debugFlg) { var events = ["contentReady", "fileSelect", "uploadStart", "uploadProgress" , "uploadCancel", "uploadComplete", "uploadCompleteData", "uploadError"]; for (var i = 0; i < events.length; i++) { upl.addListener(events[i], function(ev) { JSONDecoder.toConsole(ev); }); } } }; /** * アップローダー生成 */ YahhoUpl.prototype.getYUIUploader = function() { //SWF用エリア(非表示)の生成 var swfPlace = document.createElement("div"); swfPlace.style.width = 0; swfPlace.style.height = 0; document.getElementsByTagName("body")[0].appendChild(swfPlace); //YUI Uploader生成 var yuiBase = this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR; YAHOO.widget.Uploader.SWFURL = yuiBase + "uploader/assets/uploader.swf"; return new YAHOO.widget.Uploader(YAHOO.util.Dom.generateId(swfPlace)); } /** * プログレスバー生成 */ YahhoUpl.prototype.getProgressBar = function(barId) { var box = document.getElementById(barId); box.style.display = "none"; for (var style in this.progressBarStyle.box) { box.style[style] = this.progressBarStyle.box[style]; } var bar = document.createElement("div"); for (var style in this.progressBarStyle.bar) { bar.style[style] = this.progressBarStyle.bar[style]; } box.appendChild(bar); return {box: box, bar: bar}; } /** * プログレスバーを進める */ YahhoUpl.prototype.letProgress = function(eventId, amount, bar) { var list = this.fileList; list[eventId].bytesLoaded = amount; var loaded = 0; for (var fileId in list) { loaded += list[fileId].bytesLoaded; } bar["bar"].style.width = (loaded / this.totalSize) * 100 + "%"; } /** * ファイル選択&アップロード */ YahhoUpl.prototype.browse = function() { //ファイル選択フィルター作成 var text = this.filterText + " (*." + this.filterExtensions.join(", *.") + ")"; var ext = "*." + this.filterExtensions.join(";*."); try { this.upl.clearFileList(); this.upl.browse((this.maxCount > 1), [{description: text, extensions: ext}]); } catch(e) { alert("アップロードするにはFlash Player(バージョン9.0.45以降)が必要です。"); } }; /** * 必要なYUIのファイルを読み込む * @param Function callback 読み込み完了後に実行するコールバック関数 */ YahhoUpl.loadYUI = function(callback) { var upl = new YahhoUpl(); var yuiBase = upl.YUI_URL.SERVER + upl.YUI_URL.VERSION + upl.YUI_URL.DIR; //YUI Loaderをload var script = document.createElement("script"); script.type = "text/javascript"; script.src = yuiBase + "yuiloader/yuiloader-beta-min.js"; document.getElementsByTagName("head")[0].appendChild(script); //YUI Loaderがloadされるまで待つ var limit = 3000, interval = 100, time = 0; var loadedId = setInterval(function(){ if (window.YAHOO) { clearInterval(loadedId); //YUI Calendarをload new YAHOO.util.YUILoader({ require: ["uploader"], base: yuiBase, onSuccess: callback }).insert(); } else if ((time += interval) > limit) { //タイムアウト alert("ファイルアップロード機能の読み込みに失敗しました。"); clearInterval(loadedId); } }, interval); };
javascript/yahho-uploader.1213740102.txt.gz · 最終更新: 2008/06/18 07:01 by dgbadmin