ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


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も要確認。

使い方

  1. 下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに“crossdomain.xml”という名前で保存する。(参考:Flashのドメイン間のデータロード許可) ただし、YUIのロードを自分のサーバからやる場合は不要。
    <?xml version="1.0"?>
    <cross-domain-policy>
    <allow-access-from domain="yui.yahooapis.com" />
    </cross-domain-policy>
  2. 後は下記の例を参考に、アップローダーを組み込む
    <!-- Yahho Uploaderを読み込む -->
    <script type="text/javascript" src="path/to/your/YahhoUpl.js"></script>
     
    <!-- Yahho Uploader設置の例 -->
    <script type="text/javascript">
    var yahho = new YahhoUpl();
     
    //やりたいアップロードに合わせて、好きなように設定する
    yahho.filterText = "いろんな画像ファイル";
    yahho.filterExtension = ["jpg", "png", "gif"];
    yahho.postVars = {foo: "bar"};
    yahho.maxCount = 5;
    yahho.maxSize = 50;
    yahho.onStart = function(){ alert("始まったよ!"); };
    yahho.onComplete = function(){ alert("1つ終わったよ"); };
    yahho.onCompleteAll = function(){ alert("全部アップロードしたよ"); };
    yahho.onError = function(){ alert("エラーになっちゃった!><"); };
     
    //YUIをロードする。その際にコールバック関数を渡す(静的ロードでも別に構わないけど)
    YahhoUpl.loadYUI(setUpMyUploader);
     
    //コールバック関数。YUIのロードが完了したら呼ばれる
    function setUpMyUploader() {
      //プログレスバーを表示する場所のidと、アップロード先のURLを指定する
      yahho.setUp("progressBar", "http://example.com/your/uploade/url");
    }
    </script>
     
    <!-- ファイル選択のトリガーの例 -->
    <input type="button" value="Select File" onclick="yahho.browse()" />
     
    <!-- プログレスバーを表示する場所を作る -->
    <div id="progressBar"></div>

ソースコード

/**
 *  Yahho Uploader
 *  @see http://0-oo.net/sbox/javascript/yahho-uploader
 *  @version 0.1.2
 *  @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.1214029876.txt.gz · 最終更新: 2008/06/21 15:31 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki