Movable Type 備忘録

jQuery でファイルアップロード( JqUploader )

Nov262007
Author: bzbell
Categories: Customize
Tags: Customize, jQuery, JqUploader

Next Page: prototype で Five Star Rating( Starbox )
Prev Page: テンプレート編集画面の CodePress をオフする

こんばんわ^^

ソフトバンクの携帯が話題のようです。シャア専用携帯が明日で先行予約終了だそうです。

913SH G TYPE CHAR

会社の人にもガンダム好きな人がいるのですが、もぅうるっさいったらありゃしないっ!!
シャア専用携帯じゃ、あなたは使えませんねっ!! って皮肉っても軽～く流されちゃいました。

そうとう気になってるようでして、どんな携帯なのかサイトを見てみてビックリ、すっごいコリようです Σ(￣Д￣；)!! ガンダム好きにはたまらないんでしょうね。メニューアイコンや待ちうけもシャア専用って書いてました。

そいえば、どっかでガンダム 30 周年ってのみかけたなぁ。だからソフトバンクとのコラボなのかな!?
声優さんが『ソフトバンクの携帯は化け物か!!』と言わされてました (;￣∇￣A 大変ですね。

さて、今回は久しぶりに jQuery に関するご紹介です (●＞∀＜●)／
ホントはもっと前にいろいろ使ってみてたんだけど、気分が乗らなくってズルズルとご紹介が延びてしまいました (;￣∇￣A はは

今回ご紹介するのは JqUploader です。
わたしのサイトのメールフォームにもファイルアップロード機能を付けてますが、実は Firefox 専用だったりします (;￣∇￣A

わたしのサイトのメールフォーム♪( ただし、Firefox 専用 )

けっこう手間隙かけて作ったものだったのですが、JqUploader は手間要らずでできちゃいます。しかもフラッシュでアップロードされるので、プログレスバーによるアップロード状況も表示されます。けっこうカックいいです (●´∀｀●)

jQuery 版メールフォーム

JqUploader の説明

JqUploader の主なパラメータについてカンタンに説明します。

maxFileSize
最大転送ファイルサイズを指定します。以下のように input タグで最大サイズを指定します。
```
<input name="MAX_FILE_SIZE" value="51200" type="hidden" />
```
上記は 50KB を上限としています。
width
フラッシュ素材の横幅を指定します。デフォルトは 320px です。
height
フラッシュ素材の高さを指定します。デフォルトは 85px です。
version
表示可能なフラッシュプレイヤーのバージョンのようです。デフォルトは Ver 8 です。
background
フラッシュの背景色です。
hideSubmit
送信ボタンの表示／非表示を選択します。
たとえば、ファイルのアップロードが必須なメールフォームの場合、ファイルのアップロード完了後、メール送信ボタンを表示してくれる機能です。
src
フラッシュファイル( jqUploader.swf )のパスを指定します。
デフォルトでは、JqUploader を読込んだ HTML と同じ場所( カレント )にあるものとされています。フラッシュ表示してるファイル( demo.html )からの相対パスを指定します。
uploadScript
サーバ側で実行されるアップロードスクリプトを指定します。
デフォルトでは form タグの action 属性で指定したものが使用されます。
allowedExt
ファイル選択時の、ファイルの拡張子を選択できます。
デフォルトでは「*.jpg; *.jpeg; *.png」になっています。
allowedExtDescr
allowedExt パラメータで指定した拡張子の説明です。
デフォルトでは「Images (*.jpg; *.jpeg; *.png)」になってます。
params
フラッシュファイル( jqUploader.swf )へのパラメータです。
barcolor
プログレスバーの前景色です。
startMessage
input タグのラベルがなかった場合、「Please select a file」と表示されます。
validFileMessage
アップロード完了時のメッセージを指定できます。
デフォルトでは「now click Upload to proceed」です。
progressMessage
アップロード中のメッセージのようです。
デフォルトでは「Please wait, uploading」です。
endMessage
アップロード完了後のメッセージです。
デフォルトでは「You're all done」です。

以上が主な JqUploader のパラメータになります。これらのパラメータを必要に応じて設定します。

実際に JqUploader を使用する際の注意点

JqUploader の設置については特に説明するまでもないので省きます。
こちらから圧縮ファイルをダウンロードして各自の環境に合わせてアップロードするだけです。

ここでは jQuery 版メールフォーム設置した際に、注意すべきことを明記しておきます。

アップロード先ディレクトリについて
ファイル転送後のアップロード先のディレクトリは、デフォルトでは flash_upload.php と同じ場所の files/ ディレクトリに保存されます。
ですが自動的には作成されませんので、あらかじめ作成しておく必要があります。その際パーミッションは 755 としてください。

また、任意のディレクトリ名に変更したい場合には、flash_upload.php 内の 24 行目を変更します。
```
$uploadDir = dirname(__FILE__) . '/files/';
```
サーバ側のアップロードスクリプトについて
サンプル( demo.html )では、demo.html と同じ場所に flash_upload.php があることが前提となっています。
ですが、実際に使用する場合にはそうはいきません。

demo.html と flash_upload.php が異なる場所に置く場合には、form タグ中の action 属性で相対パスを指定します。
たとえば、以下のようなディレクトリ構成で、index.html から jquploader を使用した場合、
```
http://bizcaz.com/
|
+-- index.html
|
+-- js/
|    +-- jquery/
|          +-- jquery.js
|          |
|          +-- jquploader/
|          |    +-- jquery.jqUploader.js
|          |    +-- jquery.flash.js
|          |    +-- flash_upload.php
|          |    +-- jqUploader.swf
|          |    +-- jqUploader.fla
|          |
```
以下のように form タグの action 属性を変更してあげます。
```
<form method='post' action='js/jquery/jquploader/flash_upload.php' id='mailform' enctype='multipart/form-data'>
```

フラッシュファイルについて
サンプル( demo.html )では、demo.html と同じ場所に jqUploader.swf があることが前提となっています。
先ほどの flash_upload.php と同様に jqUploader.swf の場所を demo.html からの相対パスで指定することになります。

具体的には JqUploader のパラメータで指定してあげます。
わたしが作った jQuery 版メールフォームで指定したパラメータ設定例を以下に記します。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('#example1').jqUploader({
/* フラッシュの背景色 */
background:       'f4f6fb',
/* プログレスバーの前景色 */
barColor:         'f8b500',
/* フラッシュの横幅 */
width:            '300',
/* 選択可能なファイルの拡張子 */
allowedExt:       '*.txt; *.css; *.html',
/* allowedExt プロパティで指定した拡張子の概要 */
allowedExtDescr:  'Text file only (*.txt; *.css; *.html)',
/* 不要です。別になくてもいいです */
params:           {quality:'low'},
/* アップロード完了時のメッセージ */
validFileMessage: 'Thanks, now hit Upload!',endMessage: 'and don\'t you come back ;)',
/* 隠す必要があるボタンがなければ不要です。*/
hideSubmit:       false,
/* ★ここが肝心!! ここに相対パスを指定してあげます。*/
src:              'jquploader/jqUploader.swf'
});
});
//]]>

jqUploader の使い方
上記パラメータ設定で、#example1 という ID を指定しています。これは具体的には以下のようなブロックタグを指しています。
```
<p id="example1">
<label for="upload_file">Choose a file to upload: </label>
<input name="MAX_FILE_SIZE" value="51200" type="hidden" />
<input name="upload_file" id="upload_file" type="file" />
</p>
```
赤い字の部分が JqUploader によってフラッシュが適用される場所になります。
そして、青い字の部分は最大転送サイズを指定してます。

また、アップロード完了前はメール送信ボタンを隠したい場合には hideSubmit パラメータを true にすることで実現できます。その際、送信ボタンは以下のようにする必要があります。
```
<input type="submit" name="submit" value="Send" />
```
青い字の部分は当然「submit」にする必要がありますが、赤い字の部分のように name プロパティで「submit」にしておかないと、hideSubmit パラメータで true にしても隠されませんのでご注意ください。