Làm thế nào để mở một tệp đĩa cục bộ bằng Javascript?

Question

Tôi cố gắng để mở tập tin với

window.open("file:///D:/Hello.txt"); 

Trình duyệt không cho phép mở một tập tin địa phương theo cách này, có lẽ vì lý do an ninh. Tôi muốn sử dụng dữ liệu của tập tin ở phía máy khách. Làm thế nào tôi có thể đọc tập tin địa phương trong Javascript?

Answer 1

Bạn không thể. Các trình duyệt mới như Firefox, Safari, vv chặn giao thức 'tệp'. Nó sẽ chỉ hoạt động trên các trình duyệt cũ.

Bạn sẽ phải tải lên các tệp mình muốn.

Answer 2

HTML5 fileReader facility không cho phép bạn xử lý tệp cục bộ, nhưng PHẢI được chọn bởi người dùng, bạn không thể đi rễ về đĩa người dùng đang tìm tệp.

Tôi hiện đang sử dụng tính năng này với các phiên bản phát triển của Chrome (6.x). Tôi không biết những gì các trình duyệt khác hỗ trợ nó.

Answer 3

Javascript thường không thể truy cập tệp cục bộ trong trình duyệt mới nhưng đối tượng XMLHttpRequest có thể được sử dụng để đọc tệp. Vì vậy, nó thực sự là Ajax (và không phải Javascript) đang đọc tệp.

Nếu bạn muốn đọc các tập tin abc.txt, bạn có thể viết các mã như:

var txt = ''; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function(){ 
    if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ 
    txt = xmlhttp.responseText; 
    } 
}; 
xmlhttp.open("GET","abc.txt",true); 
xmlhttp.send(); 

Bây giờ txt chứa nội dung của file abc.txt.

Answer 4

Phương thức yêu cầu xmlhttp không hợp lệ đối với các tệp trên đĩa cục bộ vì bảo mật trình duyệt không cho phép chúng tôi làm như vậy. Nhưng chúng tôi có thể ghi đè bảo mật trình duyệt bằng cách tạo phím tắt-> nhấp chuột phải-> thuộc tính Trong mục tiêu " ... trình duyệt location path.exe "append --allow-file-access-from-files.Điều này được thử nghiệm trên chrome, tuy nhiên cần lưu ý rằng tất cả các cửa sổ trình duyệt phải được đóng và mã sẽ được chạy từ trình duyệt đã mở thông qua phím tắt này.

Answer 5

Dưới đây là một ví dụ sử dụng FileReader:

function readSingleFile(e) { 
 
    var file = e.target.files[0]; 
 
    if (!file) { 
 
    return; 
 
    } 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    var contents = e.target.result; 
 
    displayContents(contents); 
 
    }; 
 
    reader.readAsText(file); 
 
} 
 

 
function displayContents(contents) { 
 
    var element = document.getElementById('file-content'); 
 
    element.textContent = contents; 
 
} 
 

 
document.getElementById('file-input') 
 
    .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" /> 
 
<h3>Contents of the file:</h3> 
 
<pre id="file-content"></pre>

---

Specs

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

trình duyệt tương thích

01.235.

• IE 10+
• Firefox 3.6+
• Chrome 13 +
• Safari 6.1+

http://caniuse.com/#feat=fileapi