Example 1-1:
ウィンドウにファイルをドラッグ&ドロップすると、そのファイルの名前を取得し表示します。
Demo: 結果を別のタブで表示
Code:
HTML
<p>name:<samp></samp></p>
<p>Drop me.</p>
CSS
body {
background-color: pink;
}
Script
$(document).on({
"dragover": function(e) {
e.preventDefault();
},
"drop": function(e) {
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0];
$("samp").text( file.name );
}
});
Example 1-2:
ウィンドウにファイルをドラッグすると、Bootstrapのモーダルダイアログを表示します。 ドロップすると、そのファイルの名前を取得しダイアログに表示します。 (なお「Upload」ボタンを押しても実際にはアップロードされません)
Demo: 結果を別のタブで表示
Code:
HTML
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Upload</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
CSS
body {
background-color: pink;
}
Script
$(document).on({
"dragover": function(e) {
e.preventDefault();
$('#myModal').modal('show');
},
"drop": function(e) {
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0];
$('#myModal').find('.modal-body').text( file.name );
}
});