JavaScript:ドラッグ&ドロップでファイルを読み込む方法
テキストファイルをテキストエリアにドラッグ&ドロップすると、ファイルの内容がテキストエリアに表示されます。 以下のテキストエリアで試すことができます。(Shift_JIS 以外でエンコードされていると文字化けするので注意してください)
プログラムは次のようになります。
readByDragDrop.html
<!doctype html>
<html>
<body>
<textarea id="TextArea" cols="100" rows="20" ondragover="handleOnDragOver();" ondrop="handleOnDrop(displayText);">
Drag & drop here.
</textarea>
<script>
function handleOnDragOver() {
event.preventDefault();
}
function handleOnDrop(handleOnLoad) {
event.preventDefault();
const files = event.dataTransfer.files;
const fileReader = new FileReader();
fileReader.readAsText(files[0], "shift-jis"); // euc, utf-8, utf-16
fileReader.addEventListener("load", function () { handleOnLoad(this); });
}
function displayText(fileReader) {
document.getElementById("TextArea").innerHTML = fileReader.result;
}
</script>
</body>
</html>
参考サイト