ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:yahho-uploader

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
javascript:yahho-uploader [2008/07/06 00:15] – 動作サンプル追加とか dgbadminjavascript:yahho-uploader [2015/09/22 14:25] (現在) – [ダウンロード] dgbadmin
行 1: 行 1:
-====== JavaScript 1ファイルでプログレスバー付きのファイルアップロードを実装 - Yahho Uploader ======+====== アップロードの進捗状況が分かるプログレスバー付きのJavaScript製ファイルアップローダー - Yahho Uploader ======
  
 更新履歴とコメントは[[http://0-oo.net/log/category/javascript/yahho-uploader/|ゼロと無限の間のログ » Yahho Uploader]]でどうぞ。 更新履歴とコメントは[[http://0-oo.net/log/category/javascript/yahho-uploader/|ゼロと無限の間のログ » Yahho Uploader]]でどうぞ。
 +
 +{{:javascript:01_s.jpg|}}
  
 [[http://developer.yahoo.com/yui/|The Yahoo! User Interface Library (YUI)]]を使いやすくラップするYahho!(ヤッホー)シリーズ。\\ [[http://developer.yahoo.com/yui/|The Yahoo! User Interface Library (YUI)]]を使いやすくラップするYahho!(ヤッホー)シリーズ。\\
 [[http://0-oo.net/sbox/javascript/yahho-calendar|Yahho Calendar]]に続く第2弾は、ファイルをアップロードしてアップロードの進捗を表すプログレスバーも表示するYahho Uploader。 [[http://0-oo.net/sbox/javascript/yahho-calendar|Yahho Calendar]]に続く第2弾は、ファイルをアップロードしてアップロードの進捗を表すプログレスバーも表示するYahho Uploader。
  
-必要なのはJavaScriptを1ファイルのみ。バックグラウドではYUIのJavaScriptをいくつかSWF(Flash)使ってるけどそれYahoo!のサーバからロードるので意識しないで済むはず+準備するのはJavaScriptを1ファイルとボタン画像のみ。Flash Playerのージョ10にも対応した。8-) 
 + 
 +なお、YUI Uploaderがバージョン2.5と2.6でAPIが変わったともない、このYahho Uplaoderもバージョン0.1.xと0.2でAPIが変わって。バージョンアップする方は注意! 
 + 
 +またバージョン0.2.1か、YUIのホスティング元を米Yahoo!からGoogleに変更した。それに伴い、crossdomain.xml許可するドメインが代わっているので意。
  
  
行 15: 行 21:
 ===== ライセンス ===== ===== ライセンス =====
 Yahho Calendarは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\ Yahho Calendarは[[http://0-oo.net/pryn/MIT_license.txt|MITライセンス]]で。\\
-YUIの使用は[[http://developer.yahoo.com/yui/license.html|YUIのライセンス]](BSDライセンス)に従って。\\ + 
-米Yahoo!からYUIのファイルをロードする場合は[[http://developer.yahoo.com/yui/articles/hosting/|Serving YUI Files from Yahoo! Servers]]も要確認\\+YUIは[[http://developer.yahoo.com/yui/license.html|BSDライセンス]]。\\ 
 + 
 +デフォルトではYUIのファイルをGoogleからロードするので、[[http://code.google.com/intl/ja/apis/ajaxlibs/terms.html|Google AJAX Libraries APIの利用規約]]も参照 
 + 
 + 
 +===== ダウンロード ===== 
 +[[http://g.0-oo.net/yahho-uploader.js|yahho-uploader.js]]
  
  
 ===== 使い方 ===== ===== 使い方 =====
-  - 下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに"crossdomain.xml"という名前で保存する。(参考:[[http://livedocs.adobe.com/flash/8_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001621.html|Flashのドメイン間のデータロード許可]]) ただし、YUIのロードを自分のサーバからる場合は不要。<code xml>+  - 下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに"crossdomain.xml"という名前で保存する。(参考:[[http://livedocs.adobe.com/flash/8_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001621.html|Flashのドメイン間のデータロード許可]]) ただし、YUIのファイルを自分のサーバからロードする場合は不要。<code xml>
 <?xml version="1.0"?> <?xml version="1.0"?>
 <cross-domain-policy> <cross-domain-policy>
-<allow-access-from domain="yui.yahooapis.com" />+<allow-access-from domain="ajax.googleapis.com" />
 </cross-domain-policy> </cross-domain-policy>
 </code> </code>
 +  - ボタン画像を用意する。[[http://developer.yahoo.com/yui/|YUI]]のexamples/uploader/assetsディレクトリに入っている画像ファイルを使うと便利。自作する場合もそれらを参考にして作ればOK。
   - 後は下記の例を参考に、アップローダーを組み込む<code html>   - 後は下記の例を参考に、アップローダーを組み込む<code html>
 <!-- Yahho Uploaderを読み込む --> <!-- Yahho Uploaderを読み込む -->
-<script type="text/javascript" src="path/to/your/YahhoUpl.js"></script>+<script type="text/javascript" src="path/to/your/yahho-uploader.js"></script>
  
 <!-- Yahho Uploader設置の例 --> <!-- Yahho Uploader設置の例 -->
行 45: 行 58:
 //コールバック関数。YUIのロードが完了したら呼ばれる //コールバック関数。YUIのロードが完了したら呼ばれる
 function setUpMyUploader() { function setUpMyUploader() {
-  //プログレスバーを表示する場所のidと、アップロード先のURLを指定する +  yahho.setUp( 
-  yahho.setUp("progressBar", "http://example.com/your/uploade/url");+    "uploadBtn", //ボタンを表示場所にするdiv要素のid 
 +    "progressBar", //プログレスバーを表示する場所するdiv要素のid 
 +    "http://example.com/your/uploade/url", //アップロード先のURL 
 +    "path/to/your/selectFileButton.png" //ボタン画像のURL 
 +  );
 } }
 </script> </script>
  
 <!-- ファイル選択のトリガーの例 --> <!-- ファイル選択のトリガーの例 -->
-<input type="buttonvalue="Select Fileonclick="yahho.browse()" />+<div id="uploadBtnstyle="width:100px;height:40px;">Flash Player 9.0.45以上が必要です</div>
  
 <!-- プログレスバーを表示する場所を作る --> <!-- プログレスバーを表示する場所を作る -->
行 78: 行 95:
 yahho.onCompleteAll = function(){ alert("全部アップロードしたよ"); }; yahho.onCompleteAll = function(){ alert("全部アップロードしたよ"); };
 yahho.onError = function(id, httpStatus, errorInfo){ alert("エラーになっちゃった!><"); }; yahho.onError = function(id, httpStatus, errorInfo){ alert("エラーになっちゃった!><"); };
 +
 +//FirefoxでAdblock Plusを使っている場合にyuiがフレームと勘違いして
 +//topを使おうとしてエラーになるのを回避する
 +var top = document;
  
 YahhoUpl.loadYUI(function(){ YahhoUpl.loadYUI(function(){
   //自分のサーバ内で完結してれば、アップロード先のURLはドメイン無しでもいけると思う   //自分のサーバ内で完結してれば、アップロード先のURLはドメイン無しでもいけると思う
-  yahho.setUp("progressBar", "/distination.php");+  yahho.setUp("uploadBtn", "progressBar", "/distination.php", "selectFileButton.png");
 }); });
 </code> </code>
行 91: 行 112:
   Yahho Uploader   Yahho Uploader
   @see http://0-oo.net/sbox/javascript/yahho-uploader   @see http://0-oo.net/sbox/javascript/yahho-uploader
-  @version 0.1.3 +  @version 0.2.2 
-  @copyright 2008 dgbadmin@gmail.com+  @copyright 2008-2009 dgbadmin@gmail.com
   @license http://0-oo.net/pryn/MIT_license.txt (The MIT license)   @license http://0-oo.net/pryn/MIT_license.txt (The MIT license)
  */  */
行 105: 行 126:
  */  */
 YahhoUpl.prototype = { YahhoUpl.prototype = {
-    /** YUIのURL@see http://developer.yahoo.com/yui/articles/hosting/ ) */+    /** 
 +        loadYUI()で読み込むYUIのURL 
 +        @see http://developer.yahoo.com/yui/articles/hosting/ 
 +        @see http://code.google.com/intl/ja/apis/ajaxlibs/documentation/#yui 
 +     */
     YUI_URL: {     YUI_URL: {
-        SERVER: "http://yui.yahooapis.com/", +        SERVER: location.protocol + "//ajax.googleapis.com/ajax/libs/yui/", 
-        VERSION: "2.5.2",+        VERSION: "2.7.0",
         DIR: "/build/"         DIR: "/build/"
     },     },
行 129: 行 154:
     /** 1ファイル当たりのファイルサイズ制限(単位はMB) */     /** 1ファイル当たりのファイルサイズ制限(単位はMB) */
     maxSize: 10,     maxSize: 10,
 +    
 +    /** アップロード中のマウスカーソルの形(ex: auto, progress, wait) */
 +    cursor: "wait",
  
     /**     /**
行 159: 行 187:
     /** プログレスバーのスタイル */     /** プログレスバーのスタイル */
     progressBarStyle: {     progressBarStyle: {
-        box: {padding: 0, width: "20em", height: "1em", backgroundColor: "#fff", border: "1px #000 solid"}, +        box: { 
-        bar: {margin: 0, height: "100%", backgroundColor: "#0f0", borderStyle: "none"}+            padding: 0, width: "20em", height: "1em", backgroundColor: "#fff", 
 +            border: "1px #000 solid" 
 +        }, 
 +        bar: { 
 +            margin: 0, height: "100%", backgroundColor: "#0f0", borderStyle: "none" 
 +        }
     }     }
 }; };
 /** /**
   設定を取り込んでセットアップ   設定を取り込んでセットアップ
 +  @param  String  buttonId    ボタン表示場所のid属性
   @param  String  barId       プログレスバーのid属性   @param  String  barId       プログレスバーのid属性
-  @param  String  uploadUrl   アップロード先のURL(yui.yahooapis.comを使う場合はhttpから始まるURLを指定する)+  @param  String  uploadUrl   アップロード先のURL(外部のYUIを使う場合はhttp://から) 
 +  @param  String  btnImgUrl   ボタン画像のURL
  */  */
-YahhoUpl.prototype.setUp = function(barId, uploadUrl) { +YahhoUpl.prototype.setUp = function(buttonId, barId, uploadUrl, btnImgUrl) { 
-    var upl = this.getYUIUploader(); +    try { 
-    this.upl = upl;+        var upl = (this.upl = this.getYUIUploader(buttonId, btnImgUrl)); 
 +    } catch(e) { 
 +        alert("ファイルをアップロードするには、Flash Player(バージョン9.0.45以降)が必要です。"); 
 +        return; 
 +    }
     var pBar = this.getProgressBar(barId);     var pBar = this.getProgressBar(barId);
     var bar = pBar.bar;     var bar = pBar.bar;
     var self = this;     var self = this;
 +    var bodyStyle = document.body.style;
  
 +    //初期化時
 +    upl.addListener("contentReady", function() {
 +        //複数選択可否の設定
 +        upl.setAllowMultipleFiles(self.maxCount > 1);
 +        //ファイル選択フィルターの設定
 +        var text = self.filterText + " (*." + self.filterExtensions.join(", *.") + ")";
 +        var ext = "*." + self.filterExtensions.join(";*.");
 +        upl.setFileFilters([{description: text, extensions: ext}]);
 +    });
 +    
     //ファイル選択時     //ファイル選択時
     upl.addListener("fileSelect", function(ev) {     upl.addListener("fileSelect", function(ev) {
         self.totalSize = 0;         self.totalSize = 0;
         var cnt = 0;         var cnt = 0;
 +        var err = "";
         for (var fileId in ev.fileList) {         for (var fileId in ev.fileList) {
-            var size = ev.fileList[fileId].size; 
             cnt++;             cnt++;
-            if (cnt > self.maxCount) { +            var size = ev.fileList[fileId].size
-                alert("アップロードできるファイル数は " + self.maxCount + " ファイルまでです。"); +            if (size / (1024 * 1024) > self.maxSize) { 
-                return+                err = "アップロードできるファイルサイズは、1ファイルあたり "
-            } else if (size / (1024 * 1024) > self.maxSize) { +                err +self.maxSize + "MB までです。"; 
-                alert("アップロードできるファイルサイズは、1ファイルあたり " + self.maxSize + "MB までです。")+                break;
-                return;+
             }             }
             //プログレスバーのための準備             //プログレスバーのための準備
             ev.fileList[fileId].bytesLoaded = 0;             ev.fileList[fileId].bytesLoaded = 0;
             self.totalSize += size;             self.totalSize += size;
 +        }
 +        if (cnt > self.maxCount) {
 +            err = "アップロードできるファイル数は " + self.maxCount + " ファイルまでです。";
 +        }
 +        if (err) {
 +            alert(err);
 +            upl.clearFileList();
 +            return;
         }         }
  
行 197: 行 254:
         bar.style.width = "0%";         bar.style.width = "0%";
         pBar.box.style.display = "block";         pBar.box.style.display = "block";
- +        
-        upl.uploadAll(uploadUrl, "POST", self.postVars, self.postKey);+
         self.fileList = ev.fileList;         self.fileList = ev.fileList;
-        self.onStart(ev.fileList); 
         self.completeFlg = false;         self.completeFlg = false;
 +        self.onStart(ev.fileList);
 +
 +        bodyStyle.cursor = self.cursor;
 +
 +        upl.uploadAll(uploadUrl, "POST", self.postVars, self.postKey);
     });     });
  
行 212: 行 272:
     upl.addListener("uploadComplete", function(ev) {     upl.addListener("uploadComplete", function(ev) {
         self.letProgress(ev.id, self.fileList[ev.id].size, bar);         self.letProgress(ev.id, self.fileList[ev.id].size, bar);
 +        bodyStyle.cursor = "auto";
         //コールバック         //コールバック
         self.onComplete(ev.id);         self.onComplete(ev.id);
行 217: 行 278:
             self.completeFlg = true;             self.completeFlg = true;
             self.onCompleteAll();             self.onCompleteAll();
 +            upl.clearFileList();
         }         }
     });     });
行 222: 行 284:
     //アップロードエラー時(1度のエラーで2回呼ばれる)     //アップロードエラー時(1度のエラーで2回呼ばれる)
     upl.addListener("uploadError", function(ev) {     upl.addListener("uploadError", function(ev) {
 +        bodyStyle.cursor = "auto";
         if (isNaN(ev.status)) {    //2回目はエラー内容が渡される         if (isNaN(ev.status)) {    //2回目はエラー内容が渡される
             self.onError(ev.id, self.httpStatus, ev.status);             self.onError(ev.id, self.httpStatus, ev.status);
行 232: 行 295:
   アップローダー生成   アップローダー生成
  */  */
-YahhoUpl.prototype.getYUIUploader = function() { +YahhoUpl.prototype.getYUIUploader = function(buttonId, btnImgUrl) {
-    //SWF用エリア(非表示)の生成 +
-    var swfPlace = document.createElement("div"); +
-    swfPlace.style.width = 0; +
-    swfPlace.style.height = 0; +
-    document.getElementsByTagName("body")[0].appendChild(swfPlace); +
     //YUI Uploader生成     //YUI Uploader生成
     var yuiBase = this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR;     var yuiBase = this.YUI_URL.SERVER + this.YUI_URL.VERSION + this.YUI_URL.DIR;
     YAHOO.widget.Uploader.SWFURL = yuiBase + "uploader/assets/uploader.swf";     YAHOO.widget.Uploader.SWFURL = yuiBase + "uploader/assets/uploader.swf";
-    return new YAHOO.widget.Uploader(YAHOO.util.Dom.generateId(swfPlace));+    return new YAHOO.widget.Uploader(buttonId, btnImgUrl);
 }; };
 /** /**
行 271: 行 328:
     }     }
     bar.style.width = (loaded / this.totalSize) * 100 + "%";     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以降)が必要です。"); 
-    } 
 }; };
 /** /**
行 300: 行 342:
     script.src = yuiBase + "yuiloader-dom-event/yuiloader-dom-event.js";     script.src = yuiBase + "yuiloader-dom-event/yuiloader-dom-event.js";
     document.getElementsByTagName("head")[0].appendChild(script);     document.getElementsByTagName("head")[0].appendChild(script);
- +
     //YUI Loaderがloadされるまで待つ     //YUI Loaderがloadされるまで待つ
-    var limit = 3000, interval = 100, time = 0;+    var limit = 3000, interval = 50, time = 0;
     var loadedId = setInterval(function(){     var loadedId = setInterval(function(){
         if (window.YAHOO) {         if (window.YAHOO) {
             clearInterval(loadedId);             clearInterval(loadedId);
-            //YUI Calendarをload +            //YUI Uploaderをload 
-            new YAHOO.util.YUILoader({ +            (new YAHOO.util.YUILoader({ 
-                require: ["uploader"], base: yuiBase, onSuccess: callback +                base: yuiBase, require: ["uploader"], onSuccess: callback 
-            }).insert();+            })).insert();
         } else if ((time += interval) > limit) {    //タイムアウト         } else if ((time += interval) > limit) {    //タイムアウト
             alert("ファイルアップロード機能の読み込みに失敗しました。");             alert("ファイルアップロード機能の読み込みに失敗しました。");
javascript/yahho-uploader.1215270903.txt.gz · 最終更新: 2008/07/06 00:15 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki