FileReader を実装する最新のブラウザーは、これを行うことができます。ブラウザをテストするには、window.FileReader が定義されているかどうかを確認してください。
これを行うために数日前に書いたコードを次に示します。私の場合、ここでは panel.in1 として参照されている HTML 要素にファイルをドラッグするだけですが、使用することもできます (以下の参照を参照)。
if (window.FileReader) {
function dragEvent (ev) {
ev.stopPropagation ();
ev.preventDefault ();
if (ev.type == 'drop') {
var reader = new FileReader ();
reader.onloadend = function (ev) { panel.in1.value += this.result; };
reader.readAsText (ev.dataTransfer.files[0]);
}
}
panel.in1.addEventListener ('dragenter', dragEvent, false);
panel.in1.addEventListener ('dragover', dragEvent, false);
panel.in1.addEventListener ('drop', dragEvent, false);
}
イベントハンドラで復元したファイルのテキストをthis.resultとして取得するのがreader.onloadend関数です。
MDN からこれを行う方法に関するメカニズムのほとんどを取得しました: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
このコードは、ファイルの読み取りの基本を示しています。ファイル自体はテキスト領域にドラッグされます。これは、ファイルを選択するメカニズムを経由するよりも優れたインターフェイスだと思いますが、読み取るファイルを選択するために同様にうまく機能します。
これは、同様の質問に対する私の答えです: javascriptを使用してテキストファイルのコンテンツを取得する