Pot.js と PotLite.js で利用可能。
コンストラクタ。ブラウザにファイルがドラッグ＆ドロップされた時の動作を設定します。
引数 target には、対象の DOM 要素、もしくは id を文字列で指定します。
target に jQuery オブジェクトが渡されると、 get(0) によって最初の要素が対象になります。
引数 options には、ドロップされた時や ファイルが読み込めた時などのイベントを設定します。
options はオブジェクトで指定し、以下のキーが有効です。
readAs :
- 'text' : テキストとして読み込みます (readAsText)。encoding が有効になります。
- 'binary' : バイナリとして読み込みます (readAsBinaryString)。
- 'arraybuffer' : ArrayBufferとして読み込みます (readAsArrayBuffer)。
- 'datauri' : DataURIとして読み込みます (readAsDataURL)。
- null : テキストファイルは 'text'、それ以外は 'datauri' で読み込みます (デフォルト)。
onShow : function() {
this : Pot.DropFile インスタンス自身。
}
onHide : function() {
this : Pot.DropFile インスタンス自身。
}
onProgress : function(percent) {
this : Pot.DropFile インスタンス自身。
percent : {Number} : 0 - 100 までの進歩状況。
}
onProgress : function(percent, fileinfo) {
this : Pot.DropFile インスタンス自身。
percent : {Number} : 0 - 100 までの進歩状況。
fileinfo : {Object} : name, size, type, index を持つファイル情報。
- fileinfo.name : {String} : ファイル名
- fileinfo.size : {Number} : ファイルサイズ (Byte)
- fileinfo.type : {String} : ファイルタイプ (MIME)
- fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
onDrop : function(files, total) {
this : Pot.DropFile インスタンス自身。
files : {Array} : ドロップされたファイルの配列 (event.dataTransfer.files)。
total : {Number} : files の総数。
}
onLoadImage : function(data, fileinfo) {
this : Pot.DropFile インスタンス自身。
data : {String|*} : ファイルのデータ (readAs の形式)。
fileinfo : {Object} : name, size, type, index を持つファイル情報。
- fileinfo.name : {String} : ファイル名
- fileinfo.size : {Number} : ファイルサイズ (Byte)
- fileinfo.type : {String} : ファイルタイプ (MIME)
- fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
onLoadText : function(data, fileinfo) {
this : Pot.DropFile インスタンス自身。
data : {String|*} : ファイルのデータ (readAs の形式)。
fileinfo : {Object} : name, size, type, index を持つファイル情報。
- fileinfo.name : {String} : ファイル名
- fileinfo.size : {Number} : ファイルサイズ (Byte)
- fileinfo.type : {String} : ファイルタイプ (MIME)
- fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
onLoadUnknown : function(data, fileinfo) {
this : Pot.DropFile インスタンス自身。
data : {String|*} : ファイルのデータ (readAs の形式)。
fileinfo : {Object} : name, size, type, index を持つファイル情報。
- fileinfo.name : {String} : ファイル名
- fileinfo.size : {Number} : ファイルサイズ (Byte)
- fileinfo.type : {String} : ファイルタイプ (MIME)
- fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
onLoadEnd : function(files) {
this : Pot.DropFile インスタンス自身。
files : {Array} : 読み込んだファイルデータの配列。
}
Pot.globalize() が適応されている場合、new Pot.DropFile() が new DropFile() で実行できます。
Pot.DropFile インスタンスが返ります。
// この例では DOM 要素の操作に jQuery を使用しています
// この例の実行後にブラウザにファイルをドロップすることができます
// ドロップ用のパネルを生成
var panel = $('<div/>')
.css({
position : 'fixed',
left : '10%',
top : '10%',
width : '80%',
height : '80%',
minHeight : 200,
background : '#ccc',
border : '2px solid #999',
zIndex : 9999999
})
.hide()
.text('Drop here')
.appendTo('body');
// 設定と共に Pot.DropFile インスタンスを生成
var dropFile = new Pot.DropFile(panel, {
// ドロップ可能な時 (パネルを表示)
onShow : function() { panel.show() },
// ドロップ不可の時 (パネルを非表示)
onHide : function() { panel.hide() },
// ファイルがドロップされた時
onDrop : function(files, total) {
panel.text('dropped');
},
// 画像がドロップされた時
onLoadImage : function(data, fileinfo) {
$('<img/>').attr('src', data).appendTo('body');
},
// テキストがドロップされた時
onLoadText : function(data, fileinfo) {
$('<textarea/>').val(data).appendTo('body');
},
// それ以外のファイルがドロップされた時
onLoadUnknown : function(data, fileinfo) {
$('<textarea/>').val(data).appendTo('body');
},
// ファイルがドロップされてロード完了した時
onLoadEnd : function(files) {
// このタイミングでアップロードが可能
/*
this.upload(
'http://www.example.com/uplaod',
'dropfiles'
).then(function() {
alert('アップロード完了');
});
*/
}
});
// ドロップイベントをクリアする場合
$('#clear-drop-events').click(function() {
dropFile.clearDropEvents();
});
動作については、jsFiddle サンプルを参照ください。