<html>
<head>
<meta charset="utf-8">
<title>ファイルのアップロード</title>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
window.addEventListener('dragover', function (event) {
event.preventDefault();
}, false);
// ドロップ時のイベント
document.getElementById('dragArea').addEventListener('drop', function (event) {
event.preventDefault();
var dt = event.dataTransfer;
// メッセージエリアのメッセージをクリア
result = $('#result');
result.html('');
/// ドロップされたファイルを順次送信
for (var i = 0; i < dt.files.length; i++) {
upload(dt.files[i]);
}
}, false);
// ファイルアップロード
function upload(file) {
result = $('#result');
// データを送信用する
var fd = new FormData();
fd.append("file", file, file.name);
// ajaxを使用してアップロード
$.ajax('fileup.php', {
method: 'POST',
contentType: false,
processData: false,
data: fd,
dataType: 'json',
success: function (data) {
var msg = "成功";
if(data['FLG'] == false){
msg = "失敗";
}
result.append("<p>" + msg + "：" + data['NAME'] + "</p>");
}
});
}
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});
</script>
<style type="text/css">
#dragArea {
border: solid 1px #000000;
background-color: #cccccc;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="dragArea">ファイルをここにドラッグ</div>
<div id="result"></div>
</body>
</html>
プログラム