jQueryによるファイルのアップロードを補助するプラグインです。
次のような機能を簡単に実装することができます。
- 複数ファイルのアップロード
- アップロードの進捗状況の表示
- ドラッグアンドドロップによるアップロード
- アップロード途中での停止
- アップロードしたファイルの削除
イメージとしては、次のようなものになります。
基本的な使い方としては、jQueryに続いてjquery.file-uploadプラグインを読み込みます。
<script src="jquery.js"></script>
<script src="jquery.file-upload.min.js"></script>プラグインで指定する要素は通常のdiv等の要素になります。要素内に、input[type=file]の要素を持つ要素を指定します。例えば次のように指定します。
<div id="upload">
<div class="dropArea">
<input type="button" id="uploadButton" value="ファイルを選択">
<input type="file" id="file" multiple="multiple">
<div class="uploadInfo"></div>
</div>
</div>のようなHTMLに対して、
$('#upload').fileUpload({ オプション });とします。
設定項目が多いため、同梱しているsample1とsample2を参考にして設定するのがいいと思います。サーバー側のサンプルはJavaで行っています。
設定の一覧とデフォルト値は次のとおりです。
url: 'upload',
deleteUrl: 'upload',
uploadButton: '#uploadButton',
fileButton: '#file',
uploadInfo: '.uploadInfo',
uploadInfoRowClass: 'uploadInfoRow',
stopButton: '.stopButton',
deleteButton: '.deleteButton',
enableDragAndDrop: true,
dropArea: '.dropArea',
startUploadCallBack: function() {},
progressCallBack: function() {},
abortCallBack: function() {},
doneUploadCallBack: function() {},
failUploadCallBack: function() {},
stopCallBack: function() {},
doneDeleteCallBack: function() {},
failDeleteCallBack: function() {},
dragEnterCallBack: function() {},
dragLeaveCallBack: function() {},
dragOverCallBack: function() {},
// 行内の要素
rowHtml:
'<div class="fileName"></div>' +
'<div class="transferSize"></div>' +
'<div class="transferStatus"><div class="progressBar"></div></div>' +
'<div class="operation">' +
'<input type="button" class="stopButton" value="停止">' +
'<input type="button" class="deleteButton hide" value="削除">' +
'</div>',
rowEl: {
$fileName: '.fileName',
$transferSize: '.transferSize',
$transferStatus: '.transferStatus',
$progressBar: '.progressBar'
}アップロードするファイルを送信するURL。このURLに1ファイルに対して、1回POSTメソッドのリクエストが発行されます。デフォルトはuploadです。
deleteButtonを押された時に実行されるURLです。このURLに対してDELETEメソッドのリクエストが発行されます。デフォルトはuploadです。
アップロードするファイルを選択するボタンのセレクタです。このボタンが押された時に、次のfileButtonが押されます。デフォルトは#uploadButtonです。
input[type=file]を示すセレクタです。uploadButtonが押された時に、押されます。この要素は非表示になります。デフォルトは#fileです。
ファイルのアップロードの状況を表示する領域のセレクタです。デフォルトは.uploadInfoです。
uploadInfoの中にアップロードするファイル1つにつき1つ作られるdiv要素のclass属性の値です。デフォルトはuploadInfoRowです。
アップロードの途中で停止するためのボタンのセレクタです。このボタンはファイル1つにつき1つ作成されます。また、ファイルの送信中のみ表示されます。デフォルトは、.stopButtonです。
アップロードしたファイルを削除するボタンのセレクタです。このボタンはファイル1つにつき1つ作成されます。また、ファイルのアップロード完了後のみ表示されます。デフォルトは.deleteButtonです。
trueの場合ドラッグアンドドロップのファイルアップロード機能を有効にします。デフォルトはtrueです。
ファイルをドロップできる場所のセレクタです。デフォルトは.dropAreaです。
ファイルがアップロードされる直前に呼び出される関数です。デフォルトは何もしません。
ファイル送信中に定期的に呼び出されるprogressイベントの際に呼び出される関数です。ファイルのアップロードの進捗状居の表示等に使用できます。デフォルトは何もしません。
ファイルの送信中にエラーがあった場合に呼び出される関数です。デフォルトは何もしません。
ファイルの送信が完了した時に呼び出される関数です。削除ボタンの表示等に使用できます。デフォルトは何もしません。
ファイルの送信が失敗した時に呼び出される関数です。デフォルトは何もしません。
ファイルの送信中にstopButtonが押されたときに呼び出される関数です。デフォルトは何もしません。
ファイルの削除が完了した時に呼び出される関数です。デフォルトは何もしません。
ファイルの削除が失敗した時に呼び出される関数です。デフォルトは何もしません。
dropAreaに対して、dragenterイベントが起きた場合に呼び出される関数です。デフォルトは何もしません。
dropAreaに対して、dragLeaveイベントが起きた場合に呼び出される関数です。デフォルトは何もしません。
dropAreaに対して、dragOverイベントが起きた場合に呼び出される関数です。デフォルトは何もしません。
アップロードするファイル１つに対し、uploadInfoの中に作られるHTMLです。デフォルトは次のとおりです。
'<div class="fileName"></div>' +
'<div class="transferSize"></div>' +
'<div class="transferStatus"><div class="progressBar"></div></div>' +
'<div class="operation">' +
'<input type="button" class="stopButton" value="停止">' +
'<input type="button" class="deleteButton hide" value="削除">' +
'</div>',rowHtmlで定義したHTMLを操作するために指定するために変数名に対するセレクタをマッピングするオブジェクトです。デフォルトは次のとおりです。
{
$fileName: '.fileName',
$transferSize: '.transferSize',
$transferStatus: '.transferStatus',
$progressBar: '.progressBar'
}MIT