HTML5拖放：使用JavaScript將文本文件加載到文本框中

Question

我想允許用戶從他們的計算機中拖放（或選擇）文件並使用JavaScript將文件加載到文本框中。

是否可以使用JavaScript將本地文件加載到文本框中？如果是，那麼如何？

Answer 1

我想你想對HTML5的一切都包含在在github上的remy/html5demos。

舉個例子，我修改了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