Skip to content

Instantly share code, notes, and snippets.

@yuki2006
Created August 25, 2013 15:56
Show Gist options
  • Save yuki2006/6334647 to your computer and use it in GitHub Desktop.
Save yuki2006/6334647 to your computer and use it in GitHub Desktop.
簡単なファイルドラッグアンドドロップ実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- JavaScript plugins (requires jQuery) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="csv_dd_area"></div>
</body>
</html>
$(function() {
//http://paulownia.hatenablog.com/entry/20110327/1301240288
$("#csv_dd_area").bind("drop", function(event) {
event.stopPropagation();
event.preventDefault();
var dt = event.originalEvent.dataTransfer;
var file = dt.files[0];
var reader = new FileReader();
//http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html
if (file.type.match('text.*')) {
// ファイル読取が完了した際に呼ばれる処理
reader.onload = function(evt) {
// FileReaderが取得したテキストをそのままdivタグに出力
$("#csv_dd_area").text(reader.result);
}
// readAsTextメソッドでファイルの内容を取得
reader.readAsText(file, 'utf-8');
}
}).bind("dragenter dragover", false);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment