複数ファイルを一気にUPする – 大阪のシステム開発・WEBシステム開発会社技術担当スタッフの覚書き、子だぬきの技術習得ノート

今回複数の写真を一気にUPしたい案件があったのでネットを探していたら、便利そうなライブラリを発見！！

その名もSWFUploadライブラリというもので、ファイルを選択する際にドラッグで複数選ぶか、ShiftかCtrlを押しながら複数選ぶ。
選び終わったら開くボタンを押す、そしたら選ばれたファイルが進行状況が分かりながらアップロードされていくというライブラリです。

とりあえず次のURLからライブラリの入手をします。
http://www.swfupload.org/

ダウンロードしてきてとりあえずサンプルのデモを見てみて使えることを確認。
そのソースで要るところを抜粋していって最小で動くライブラリを整理しました。

構造的に下のような感じになります。

/simpledemo/index.phpの内部で次のようなjavascriptの記述をしています。

var swfu;
window.onload = function() {
var settings = {
flash_url : "../swfupload/swfupload.swf",
upload_url: "upload.php",
post_params: {"PHPSESSID" : ""},
file_size_limit : "4096",
file_types : "*.jpg; *.jpeg;",
file_types_description : "画像ファイル",
file_upload_limit : 20,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "images/button.png",
button_width: "120",
button_height: "30",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: 'ファイル選択',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete	// Queue plugin event
};
swfu = new SWFUpload(settings);
};

のようなソースになっています。
javascriptで各ステータスを指定しているので、自分のサイトにあった形で書き換えていきます。
分かる範囲で簡単に説明を書くと、
flash_url : “../swfupload/swfupload.swf”
付属されているフラッシュへのパスを指定

upload_url: “upload.php”
アップロード処理が動くファイルへのパスを指定

file_size_limit : “4096”
アップできるファイルの上限サイズ　今回だったら4MBまでって感じです。

file_types : “*.jpg; *.jpeg;”
アップできるファイルの種類　今回だったら拡張子の.jpgと.jpegファイルだけUPされます。

file_types_description : “画像ファイル”
ダイアログが開いたときにアップできるファイルはどれですよという説明文　今回だったら画像ファイルという文字が出ます。

file_upload_limit : 20
一回でアップロードできるファイルの上限サイズ　今回だったら最大20個までUPされます。

button_image_url: “images/button.png”
ファイルの選択ボタンの画像へのパス　ファイル選択ボタンが変えたかったらここの画像を変更する。

button_text: ‘ファイル選択‘
ファイルの選択ボタンの文字表示　こじゃれた見た目にするならここのメッセージを無くして画像で綺麗に作ったらいいです。

とりあえずこのぐらいの変更で使ってみます。

次に実際に画像をUPするファイル/simpledemo/upload.phpの内容が、

という感じで、ここでは/simpledemo/uploadsフォルダに画像を上げていきます。

これでSWFUploadは使えるようになったのですが、
状態を表す時やエラーになった時のメッセージが英語の状態なので日本語に変えます。
/simpledemo/js/handlers.jsファイルの内容を次のように変えました。

function fileQueued(file) {
try {
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setStatus("アップロード待ち");
progress.toggleCancel(true, this);
} catch (ex) {
this.debug(ex);
}
}
function fileQueueError(file, errorCode, message) {
try {
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
alert("1回でアップロード出切るファイル数を超えています。");
return;
}
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setError();
progress.toggleCancel(false);
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
progress.setStatus("UP出切るファイルの上限サイズを超えています。");
this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
progress.setStatus("0バイトのファイルはUP出来ません。");
this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
progress.setStatus("UP出きるファイルの種類ではありません。");
this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
default:
if (file !== null) {
progress.setStatus("ファイルが見つけれませんでした。");
}
this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
} catch (ex) {
this.debug(ex);
}
}
function uploadStart(file) {
try {
/* I don't want to do any file validation or anything,  I'll just update the UI and
return true to indicate that the upload should start.
It's important to update the UI here because in Linux no uploadProgress events are called. The best
we can do is say we are uploading.
*/
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setStatus("アップロード中");
progress.toggleCancel(true, this);
}
catch (ex) {}
return true;
}
function uploadProgress(file, bytesLoaded, bytesTotal) {
try {
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setProgress(percent);
progress.setStatus("アップロード中");
} catch (ex) {
this.debug(ex);
}
}
function uploadSuccess(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setComplete();
progress.setStatus("完了");
progress.toggleCancel(false);
} catch (ex) {
this.debug(ex);
}
}
function queueComplete(numFilesUploaded) {
var status = document.getElementById("divStatus");
status.innerHTML = numFilesUploaded + " 個のファイルをUPしました。";
}

こんな感じで複数ファイルを一気にUP出来るようになりました。