Đọc nội dung tệp ở phía máy khách trong javascript trong các trình duyệt khác nhau

Question

Tôi đang cố cung cấp giải pháp chỉ tập lệnh để đọc nội dung của tệp trên máy khách thông qua trình duyệt.

Tôi có giải pháp hoạt động với Firefox và Internet Explorer. Nó không đẹp, nhưng tôi chỉ cố gắng điều vào lúc này:

function getFileContents() { 
    var fileForUpload = document.forms[0].fileForUpload; 
    var fileName = fileForUpload.value; 

    if (fileForUpload.files) { 
     var fileContents = fileForUpload.files.item(0).getAsBinary(); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } else { 
     // try the IE method 
     var fileContents = ieReadFile(fileName); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } 
}  

function ieReadFile(filename) 
{ 
    try 
    { 
     var fso = new ActiveXObject("Scripting.FileSystemObject"); 
     var fh = fso.OpenTextFile(filename, 1); 
     var contents = fh.ReadAll(); 
     fh.Close(); 
     return contents; 
    } 
    catch (Exception) 
    { 
     return "Cannot open file :("; 
    } 
} 

tôi có thể gọi getFileContents() và nó sẽ viết nội dung vào khu vực fileContents văn bản.

Có cách nào để thực hiện việc này trong các trình duyệt khác không?

Tôi quan tâm nhất đến Safari và Chrome vào lúc này, nhưng tôi mở để đề xuất cho bất kỳ trình duyệt nào khác.

Edit: Để đối phó với câu hỏi: "Tại sao bạn muốn làm điều này?":

Về cơ bản, tôi muốn băm nội dung tập tin cùng với một one-time-password trên các mặt hàng vì vậy tôi có thể gửi lại thông tin này dưới dạng xác minh.

Answer 1

Biên soạn để thêm thông tin về File API

Kể từ khi tôi ban đầu đã viết câu trả lời này, File API đã được đề xuất như một tiêu chuẩn và implemented in most browsers (như của IE 10, thêm hỗ trợ cho FileReader API mô tả ở đây, mặc dù chưa phải là API File). API phức tạp hơn một chút so với API cũ của Mozilla, vì nó được thiết kế để hỗ trợ đọc tệp không đồng bộ, hỗ trợ tốt hơn cho các tệp nhị phân và giải mã các mã hóa văn bản khác nhau. Có some documentation available on the Mozilla Developer Network cũng như various examples online. Bạn sẽ sử dụng nó như sau:

var file = document.getElementById("fileForUpload").files[0]; 
if (file) { 
    var reader = new FileReader(); 
    reader.readAsText(file, "UTF-8"); 
    reader.onload = function (evt) { 
     document.getElementById("fileContents").innerHTML = evt.target.result; 
    } 
    reader.onerror = function (evt) { 
     document.getElementById("fileContents").innerHTML = "error reading file"; 
    } 
} 

câu trả lời gốc

Dường như không phải là một cách để làm điều này trong WebKit (do đó, Safari và Chrome). Các phím duy nhất có đối tượng File là fileName và fileSize. Theo số commit message cho hỗ trợ Tệp và Tệp danh sách, chúng được lấy cảm hứng từ Mozilla's File object, nhưng chúng dường như chỉ hỗ trợ một tập hợp con các tính năng.

Nếu bạn muốn thay đổi điều này, bạn luôn có thể send a patch vào dự án WebKit. Một khả năng khác là đề xuất API của Mozilla để đưa vào HTML 5; danh sách gửi thư WHATWG có lẽ là nơi tốt nhất để làm điều đó. Nếu bạn làm điều đó, thì có nhiều khả năng là sẽ có một cách trình duyệt chéo để thực hiện việc này, ít nhất là trong một vài năm tới. Tất nhiên, việc gửi bản vá hoặc đề xuất đưa vào HTML 5 có nghĩa là một số công việc bảo vệ ý tưởng, nhưng thực tế là Firefox đã triển khai nó sẽ cung cấp cho bạn một cái gì đó để bắt đầu.

Answer 2

Mã hóa vui vẻ!
Nếu bạn nhận được một lỗi trên trình duyệt Internet Explorer, thay đổi các thiết lập bảo mật cho phép ActiveX

var CallBackFunction = function(content) 
{ 
    alert(content); 
} 
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); 

//Tested in Mozilla Firefox browser, Chrome 
function ReadFileAllBrowsers(FileElement, CallBackFunction) 
{ 
try 
{ 
    var file = FileElement.files[0]; 
    var contents_ = ""; 

    if (file) { 
     var reader = new FileReader(); 
     reader.readAsText(file, "UTF-8"); 
     reader.onload = function(evt) 
     { 
      CallBackFunction(evt.target.result); 
     } 
     reader.onerror = function (evt) { 
      alert("Error reading file"); 
     } 
    } 
} 
catch (Exception) 
{ 
    var fall_back = ieReadFile(FileElement.value); 
    if(fall_back != false) 
    { 
     CallBackFunction(fall_back); 
    } 
} 
} 

///Reading files with Internet Explorer 
function ieReadFile(filename) 
{ 
try 
{ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var fh = fso.OpenTextFile(filename, 1); 
    var contents = fh.ReadAll(); 
    fh.Close(); 
    return contents; 
} 
catch (Exception) 
    { 
    alert(Exception); 
    return false; 
    } 
} 

Answer 3

Để đọc một tập tin được lựa chọn bởi người sử dụng, sử dụng một hộp thoại mở tập tin, bạn có thể sử dụng thẻ <input type="file">. Bạn có thể tìm thấy information on it from MSDN.Khi tệp được chọn, bạn có thể sử dụng FileReader API để đọc nội dung.

function onFileLoad(elementId, event) { 
 
    document.getElementById(elementId).innerText = event.target.result; 
 
} 
 

 
function onChooseFile(event, onLoadFileHandler) { 
 
    if (typeof window.FileReader !== 'function') 
 
     throw ("The file API isn't supported on this browser."); 
 
    let input = event.target; 
 
    if (!input) 
 
     throw ("The browser does not properly implement the event object"); 
 
    if (!input.files) 
 
     throw ("This browser does not support the `files` property of the file input."); 
 
    if (!input.files[0]) 
 
     return undefined; 
 
    let file = input.files[0]; 
 
    let fr = new FileReader(); 
 
    fr.onload = onLoadFileHandler; 
 
    fr.readAsText(file); 
 
}

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' /> 
 
<p id="contents"></p>