SWFUploadをサイトに設置する
SWFUploadを利用する事で、Webサイト上で、複数ファイルの選択ダイアログの表示が可能になる。設置方法と設定のポイントを紹介する。アップロードファイルをサーバ側で処理する部分に関しては割愛させていただく。
動作サンプルは、下にあるボタンで動作を確認していただきたい。（動作サンプルでは、サーバへのファイル保存は行いません）
サイトパスの修正
ダウンロードファイルに含まれる /jscripts/SWFUpload フォルダに必要なファイルが収められている。そのまま、サーバにアップロードすれば利用できるが、パスを変更した場合など mmSWFUpload.js ファイルの45行目の下記部分のパスを修正する必要がある。 new SWFObject("jscripts/SWFUpload/upload.swf"...
コンテンツへの設置
前述したmmSWFUpload.js をHTMLヘッダで下記のように呼び出しを行う。<script type="text/javascript" src="jscripts/SWFUpload/mmSWFUpload.js"></script>
SWFUploadのswfオブジェクトの表示部分HTML
// id=の名称は mmSWFUpload.init の target パラメータと同じにする
<div id="SWFUpload">
// 以下はFlashが利用できないときに表示される
<form action="" onsubmit="return false;">
<input type="file" name="upload" />
<input type="submit" value="Upload" onclick="javascript:alert('disabled...'); return false;" />
</form>
</div>
mmSWFUpload.initの処理を記述
ページの最後に記述するかonloadイベント等で行う。
<script type="text/javascript">
mmSWFUpload.init({
debug : true,
upload_backend : "../../upload.php",
target : "SWFUpload",
// link_mode : "standalone",
// link_text : "Upload",
// css_class : "myCustomClass",
allowed_filesize : "400",
allowed_filetypes : "*.gif;*.jpg;*.png",
upload_start_callback : 'uploadStart',
upload_progress_callback : 'uploadProgress',
upload_complete_callback : 'uploadComplete',
// upload_error_callback : 'uploadError',
upload_cancel_callback : 'uploadCancel',
upload_queue_complete_callback : 'uploadQueueComplete'
});
</script>
mmSWFUpload.initの設定
- debug - ture,falseで指定する、初期化処理の出力の有無
- upload_backend - アップロードされたファイルを処理するプログラムパス
- target - HTML中でswfオブジェクトに置き換える id 要素名
- allowed_filesize - アップロードサイズの上限
- allowed_filetypes - アップロード可能にするファイル拡張子（*.png など）
- upload_start_callback - アップロード開始時に呼出すJavaScript fanction
- upload_progress_callback - アップロード中に呼出すJavaScript fanction
- upload_complete_callback - アップロード完了後に呼出すJavaScript fanction
- upload_error_callback - エラー発生時に呼出すJavaScript fanction
- upload_cancel_callback - ユーザーキャンセル時に呼出すJavaScript fanction
- upload_queue_complete_callback - すべての処理完了後に呼出すJavaScript fanction
スタイルシートの記述例
初期化処理が終了すると同時に、前述していたid=SWFUploadの中身が以下のように書き換えられる。これを踏まえてスタイルシートの記述を行う。<div id="SWFUpload">
<embed id="_mmSWFUploadField" width="1" height="1" ... />
<a id="_mmSWFUploadLink" class="SWFUploadLink" ... />
</div>
swfオブジェクトの表示部分は1px x 1pxになるので、必要に応じて#_mmSWFUploadField { ...} など追加すればよい。a.SWFUploadLink{...}の部分に指定するスタイルを以下のように記述する。
<style type="text/css">
a.SWFUploadLink {
width: 76px;
height: 21px;
background: url(./images/btn_upload.png) no-repeat;
}
a.SWFUploadLink:hover {
background: url(./images/btn_upload_over.png) no-repeat;
}
</style>
動作環境には十分注意していただきたい。IE 6.x以降 FireFoxでは問題なく動作する。IE 5.xの場合ブラウザが異常終了するケースもあるので、別途ブラウザ判定を行う必要がある。
サイトの最新情報をRSSで受信できます
- 関連記事 リスト
MP3を再生してスペクトルグラフを表示するFlash
Web上でMP3など配信する場合にスペクトル(Spectrum)をサウンドに合...続きを読む
swfオブジェクトをJavaScriptでアクティブにする
Internet Explorerでは、Flashコンテンツを一度クリックしない...続きを読む
SWFオブジェクトをJavaScriptで簡単に記述する
Flashのコンテンツをサイトやブログに設置する際、<object or...>続きを読む
画像をリアルタイムにフィルタ加工するJavaScript
スタイルシートやJavaScriptを利用して、角丸、シャドウなどのフィルタを...続きを読む
非同期に読込み写真をギャラリー表示するFlash
写真などを公開しているなど、ギャラリーのように凝った見せ方をしたい場合、簡単に...続きを読む
SWFUploadをサイトに設置する
SWFUploadを利用する事で、Webサイト上で、複数ファイルの選択ダイアログ...続きを読む
