javascript:yahho-uploader
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:yahho-uploader [2008/07/06 00:15] – 動作サンプル追加とか dgbadmin | javascript:yahho-uploader [2015/09/22 14:25] (現在) – [ダウンロード] dgbadmin | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== | + | ====== |
更新履歴とコメントは[[http:// | 更新履歴とコメントは[[http:// | ||
+ | |||
+ | {{: | ||
[[http:// | [[http:// | ||
[[http:// | [[http:// | ||
- | 必要なのは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:// | Yahho Calendarは[[http:// | ||
- | YUIの使用は[[http:// | + | |
- | 米Yahoo!からYUIのファイルをロードする場合は[[http://developer.yahoo.com/yui/articles/hosting/|Serving YUI Files from Yahoo! Servers]]も要確認。\\ | + | YUIは[[http:// |
+ | |||
+ | デフォルトではYUIのファイルをGoogleからロードするので、[[http://code.google.com/intl/ja/apis/ajaxlibs/ | ||
+ | |||
+ | |||
+ | ===== ダウンロード ===== | ||
+ | [[http:// | ||
===== 使い方 ===== | ===== 使い方 ===== | ||
- | - 下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに" | + | - 下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに" |
<?xml version=" | <?xml version=" | ||
< | < | ||
- | < | + | < |
</ | </ | ||
</ | </ | ||
+ | - ボタン画像を用意する。[[http:// | ||
- 後は下記の例を参考に、アップローダーを組み込む< | - 後は下記の例を参考に、アップローダーを組み込む< | ||
<!-- Yahho Uploaderを読み込む --> | <!-- Yahho Uploaderを読み込む --> | ||
- | <script type=" | + | <script type=" |
<!-- Yahho Uploader設置の例 --> | <!-- Yahho Uploader設置の例 --> | ||
行 45: | 行 58: | ||
// | // | ||
function setUpMyUploader() { | function setUpMyUploader() { | ||
- | // | + | |
- | | + | " |
+ | " | ||
+ | " | ||
+ | " | ||
+ | | ||
} | } | ||
</ | </ | ||
<!-- ファイル選択のトリガーの例 --> | <!-- ファイル選択のトリガーの例 --> | ||
- | <input type="button" | + | <div id="uploadBtn" |
<!-- プログレスバーを表示する場所を作る --> | <!-- プログレスバーを表示する場所を作る --> | ||
行 78: | 行 95: | ||
yahho.onCompleteAll = function(){ alert(" | yahho.onCompleteAll = function(){ alert(" | ||
yahho.onError = function(id, | yahho.onError = function(id, | ||
+ | |||
+ | // | ||
+ | // | ||
+ | var top = document; | ||
YahhoUpl.loadYUI(function(){ | YahhoUpl.loadYUI(function(){ | ||
// | // | ||
- | yahho.setUp(" | + | yahho.setUp(" |
}); | }); | ||
</ | </ | ||
行 91: | 行 112: | ||
| | ||
| | ||
- | | + | |
- | | + | |
| | ||
*/ | */ | ||
行 105: | 行 126: | ||
*/ | */ | ||
YahhoUpl.prototype = { | YahhoUpl.prototype = { | ||
- | /** YUIのURL(@see http:// | + | /** |
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
YUI_URL: { | YUI_URL: { | ||
- | SERVER: "http://yui.yahooapis.com/", | + | SERVER: |
- | VERSION: "2.5.2", | + | VERSION: "2.7.0", |
DIR: "/ | DIR: "/ | ||
}, | }, | ||
行 129: | 行 154: | ||
/** 1ファイル当たりのファイルサイズ制限(単位はMB) */ | /** 1ファイル当たりのファイルサイズ制限(単位はMB) */ | ||
maxSize: 10, | maxSize: 10, | ||
+ | | ||
+ | /** アップロード中のマウスカーソルの形(ex: | ||
+ | cursor: " | ||
/** | /** | ||
行 159: | 行 187: | ||
/** プログレスバーのスタイル */ | /** プログレスバーのスタイル */ | ||
progressBarStyle: | progressBarStyle: | ||
- | box: {padding: 0, width: " | + | box: { |
- | bar: {margin: 0, height: " | + | |
+ | | ||
+ | | ||
+ | bar: { | ||
+ | | ||
+ | | ||
} | } | ||
}; | }; | ||
/** | /** | ||
| | ||
+ | | ||
| | ||
- | | + | |
+ | | ||
*/ | */ | ||
- | YahhoUpl.prototype.setUp = function(barId, | + | YahhoUpl.prototype.setUp = function(buttonId, |
- | var upl = this.getYUIUploader(); | + | |
- | | + | |
+ | | ||
+ | alert(" | ||
+ | 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(" | ||
+ | // | ||
+ | upl.setAllowMultipleFiles(self.maxCount > 1); | ||
+ | // | ||
+ | var text = self.filterText + " (*." + self.filterExtensions.join(", | ||
+ | var ext = " | ||
+ | upl.setFileFilters([{description: | ||
+ | }); | ||
+ | | ||
// | // | ||
upl.addListener(" | upl.addListener(" | ||
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++; | ||
- | | + | |
- | alert(" | + | if (size / (1024 * 1024) > self.maxSize) { |
- | return; | + | |
- | | + | err += self.maxSize + "MB までです。"; |
- | | + | |
- | | + | |
} | } | ||
// | // | ||
ev.fileList[fileId].bytesLoaded = 0; | ev.fileList[fileId].bytesLoaded = 0; | ||
self.totalSize += size; | self.totalSize += size; | ||
+ | } | ||
+ | if (cnt > self.maxCount) { | ||
+ | err = " | ||
+ | } | ||
+ | if (err) { | ||
+ | alert(err); | ||
+ | upl.clearFileList(); | ||
+ | return; | ||
} | } | ||
行 197: | 行 254: | ||
bar.style.width = " | bar.style.width = " | ||
pBar.box.style.display = " | pBar.box.style.display = " | ||
- | + | | |
- | upl.uploadAll(uploadUrl, | + | |
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, | ||
}); | }); | ||
行 212: | 行 272: | ||
upl.addListener(" | upl.addListener(" | ||
self.letProgress(ev.id, | self.letProgress(ev.id, | ||
+ | bodyStyle.cursor = " | ||
// | // | ||
self.onComplete(ev.id); | self.onComplete(ev.id); | ||
行 217: | 行 278: | ||
self.completeFlg = true; | self.completeFlg = true; | ||
self.onCompleteAll(); | self.onCompleteAll(); | ||
+ | upl.clearFileList(); | ||
} | } | ||
}); | }); | ||
行 222: | 行 284: | ||
// | // | ||
upl.addListener(" | upl.addListener(" | ||
+ | bodyStyle.cursor = " | ||
if (isNaN(ev.status)) { // | if (isNaN(ev.status)) { // | ||
self.onError(ev.id, | self.onError(ev.id, | ||
行 232: | 行 295: | ||
| | ||
*/ | */ | ||
- | YahhoUpl.prototype.getYUIUploader = function() { | + | YahhoUpl.prototype.getYUIUploader = function(buttonId, btnImgUrl) { |
- | // | + | |
- | var swfPlace = document.createElement(" | + | |
- | swfPlace.style.width = 0; | + | |
- | swfPlace.style.height = 0; | + | |
- | document.getElementsByTagName(" | + | |
//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 + " | YAHOO.widget.Uploader.SWFURL = yuiBase + " | ||
- | 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 = " | ||
- | |||
- | try { | ||
- | this.upl.clearFileList(); | ||
- | this.upl.browse((this.maxCount > 1), [{description: | ||
- | } catch(e) { | ||
- | alert(" | ||
- | } | ||
}; | }; | ||
/** | /** | ||
行 300: | 行 342: | ||
script.src = yuiBase + " | script.src = yuiBase + " | ||
document.getElementsByTagName(" | document.getElementsByTagName(" | ||
- | + | ||
//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({ | + | |
- | require: [" | + | |
- | }).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