ファイルを分割してアップロードする事で、サーバ等のファイルサイズ制限を回避する事が出来ます。
ファイルを選択した時点でファイルタイプのチェックをする事が可能です。
また、フォームを送信する前に非同期でアップロードが完了しているので、フォーム送信時にユーザーを待たす事はありません。
プラグインのダウンロード
パラメーター
INPUT_FILE (HTMLInputElement.files)
e.g.) $('#file')
e.g.) $('#files > input.file')
PHP_PATH (String)
uploader.phpのパス
ファイルを任意の場所にアップロードしてください
e.g.) https://www.hogehoge.com/uploader.php
e.g.) ./uploader.php
CALLBACK (Callback)
アップロードが完了した時に実行されるコールバック関数
第一引数 (String)
保存されたファイルパス
任意のタイミングで煮るなり焼くなりしてください
e.g.) /tmp/hogehage
第二引数 (Object)
'uuid' (string)
UUID
'triggerElement' (Element)
トリガーとなったエレメント
'file' (File)
Fileオブジェクト
'base64' (string)
base64
'splitSize' (number)
分割するバイト数
'counter' (number)
分割で送信した回数
'denominator' (number)
分割で送信する回数
OPTION (Object)
dndElement (jQuery DOM Element)
このエレメント内にドロップされたファイルを読み込む
splitSize (Number) = 1048576
分割するファイルサイズ
mimeAllow (Array)
アップロードを許可するMIME
e.g.) ['image/jpeg', 'image/png']
mimeFail (Callback)
許可されなかった場合のコールバック関数
第一引数：許可されなかったFILE (File)
cbReadPrepare (Callback)
ファイルを読み込む直前に実行されるコールバック関数
第一引数 (Object)
'uuid' (string)
UUID
'triggerElement' (Element)
トリガーとなったエレメント
'file' (File)
Fileオブジェクト
cbReadDone (Callback)
ファイルが読み込まれた時に実行されるコールバック関数
第一引数 (Object)
'uuid' (string)
UUID
'triggerElement' (Element)
トリガーとなったエレメント
'file' (File)
Fileオブジェクト
'base64' (string)
base64
cbNext (Callback)
分割ファイルがアップロードされる度に実行されるコールバック関数
第一引数 (Object)
'uuid' (string)
UUID
'triggerElement' (Element)
トリガーとなったエレメント
'file' (File)
Fileオブジェクト
'base64' (string)
base64
'splitSize' (number)
分割するバイト数
'counter' (number)
分割で送信した回数
'denominator' (number)
分割で送信する回数
第二引数 (Object)
jqXHR
cbFail (Callback)
アップロードが失敗した時に実行されるコールバック関数
第一引数 (Object)
'uuid' (string)
UUID
'triggerElement' (Element)
トリガーとなったエレメント
'file' (File)
Fileオブジェクト
'base64' (string)
base64
'splitSize' (number)
分割するバイト数
'counter' (number)
分割で送信した回数
'denominator' (number)
分割で送信する回数
第二引数 (Object)
jqXHR
<input type="file" id="one_file">
$('#one_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
});
<input type="file" id="multi_file" multiple>
$('#multi_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
});
<div id="dnd_area">ドロップして<br>ファイルを追加<br><br>または<br><br><button type="button">ファイル参照</button></div> <input type="file" id="dnd_file" multiple>
$('#dnd_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
},{
'dndElement' : $('#dnd_area')
});
// ボタンのクリックイベントを参照ボタンに渡す
$('#dnd_area > button[type=button]').click(function(){ $('#dnd_file').trigger('click'); });
<input type="file" id="png_file">
$('#png_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
},{
'mimeAllow' : [ 'image/png' ]
,'mimeFail' : function( objFile ){ alert('PNG以外はダメよ'); }
});
<div class="wrap"> <h3>画像をプレビューする</h3> <div id="preview_dnd" class="drop_area">ドロップして<br>ファイルを追加<br><br>または<br><br><button type="button">ファイル参照</button></div> <input type="file" id="preview_file" multiple> </div>
$('#preview_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
},{
'mimeAllow' : [ 'image/jpeg', 'image/png' ]
,'mimeFail' : function( objFile ){ alert('JPG/PNG以外はダメよ'); }
,'cbReadDone' : function( obj ){
$('#preview_file').parent().append('<img class="preview" src="'+obj.base64+'">');
}
,'dndElement' : $('#preview_dnd')
});
// ボタンのクリックイベントを参照ボタンに渡す
$('#preview_dnd > button[type=button]').click(function(){ $('#preview_file').trigger('click'); });
<div class="wrap"> <h3>アップロードの進捗を表示する</h3> <input type="file" id="progress_file" multiple> </div>
$('#progress_file').split_uploader('./uploader.php', function(file_path, obj){
alert(file_path + 'に保存しました。');
// 進捗バーに100%を表示
$('#progress_file').nextAll('div.progress[data-uuid='+obj.uuid+']').children('span').text( ' ( 100% )');
},{
'cbReadPrepare' : function(obj){
// 進捗バーの追加
$('#progress_file').parent().append('<div class="progress" data-uuid="'+obj.uuid+'"></div>');
}
,'cbReadDone' : function(obj){
// 進捗バーにファイル情報を表示
$('#progress_file').nextAll('div.progress[data-uuid='+obj.uuid+']').html(obj.file.name + '<span></span>');
}
,'cbNext' : function(obj){
// 進捗バーに進捗を表示
$('#progress_file').nextAll('div.progress[data-uuid='+obj.uuid+']').children('span').text( ' ( ' + Math.floor(obj.counter / obj.denominator * 1000) / 10 + '% )');
}
});