HTML5ドラッグアンドドロップ：JavaScriptを使用したテキストボックスにテキストファイルを読み込み

Question

ユーザーは自分のコンピュータからファイルをドラッグアンドドロップ（または選択）し、JavaScriptを使用してテキストボックスにロードできるようにします。

JavaScriptを使用してローカルファイルをテキストボックスに読み込むことはできますか？はいの場合は、どうですか？

Answer 1

私はあなたがHTML5のために望むすべてのものが含まれていると思いますremy/html5demos on github。

たとえば、http://html5demos.com/file-apiを変更してテキストファイルを受け入れ、ブラウザに表示するようにしました。

jsfiddleを参照してください。

編集
関連するスクリプト：

// modified from http://html5demos.com/file-api 
var holder = document.getElementById('holder'), 
    state = document.getElementById('status'); 

if (typeof window.FileReader === 'undefined') { 
    state.className = 'fail'; 
} else { 
    state.className = 'success'; 
    state.innerHTML = 'File API & FileReader available'; 
} 

holder.ondragover = function() { 
    this.className = 'hover'; 
    return false; 
}; 
holder.ondragend = function() { 
    this.className = ''; 
    return false; 
}; 
holder.ondrop = function(e) { 
    this.className = ''; 
    e.preventDefault(); 

    var file = e.dataTransfer.files[0], 
     reader = new FileReader(); 
    reader.onload = function(event) { 
     console.log(event.target); 
     holder.innerText = event.target.result; 
    }; 
    console.log(file); 
    reader.readAsText(file); 

    return false; 
};​ 

Answer 2

HTML5 File APIをチェックアウト：http://www.html5rocks.com/en/tutorials/file/dndfiles/

スペックでも、それがどのように動作するかのアイデアを得るための良い例があります。

http://dev.w3.org/2006/webapi/FileAPI/#introduction