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

Tôi đang cố gắng cung cấp giải pháp chỉ dành cho 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ó một giải pháp hoạt động với Firefox và Internet Explorer. Nó không đẹp, nhưng tôi chỉ đang thử những thứ 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ẽ ghi nội dung vào vùng fileContentsvăn bản.

Có cách nào để làm điều 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 sẵn sàng đón nhận các đề xuất cho bất kỳ trình duyệt nào khác.

Chỉnh sửa: Để trả lời cho 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 cùng với mật khẩu dùng một lần ở phía máy khách để tôi có thể gửi lại thông tin này dưới dạng xác minh.

Đã chỉnh sửa để thêm thông tin về API tệp

Kể từ khi tôi viết câu trả lời này ban đầu, API tệp đã được đề xuất như một tiêu chuẩn và được triển khai trong hầu hết các trình duyệt (kể từ IE 10, hỗ trợ thêm cho FileReaderAPI được mô tả ở đây, mặc dù chưa phải là FileAPI). API phức tạp hơn một chút so với Mozilla API cũ hơn, vì nó được thiết kế để hỗ trợ đọc tệp không đồng bộ, hỗ trợ tốt hơn cho tệp nhị phân và giải mã các mã hóa văn bản khác nhau. Có một số tài liệu có sẵn trên Mạng nhà phát triển Mozilla cũng như các ví dụ khác nhau trực tuyến. 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 ban đầu

Dường như không có cách nào để thực hiện việc này trong WebKit (do đó, Safari và Chrome). Các khóa duy nhất mà đối tượng Tệp có là fileNamevà fileSize. Theo thông báo cam kết hỗ trợ File và FileList, chúng được lấy cảm hứng từ đối tượng File của Mozilla , 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ể gửi một bản vá cho dự án WebKit. Một khả năng khác là đề xuất API Mozilla để đưa vào HTML 5 ; các WHATWG mailing list 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 sẽ có một cách trình duyệt chéo để thực hiện điều này, ít nhất là trong một vài năm. Tất nhiên, việc gửi một bản vá hoặc một đề 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ó mang lại cho bạn điều gì đó để bắt đầu.

Để đọc tệp do người dùng chọn, bằng hộp thoại mở tệp, bạn có thể sử dụng <input type="file">thẻ. Bạn có thể tìm thông tin về nó từ MSDN . Khi tệp được chọn, bạn có thể sử dụng API FileReader để đọ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>

Chúc bạn viết mã vui vẻ!
Nếu bạn gặp lỗi trên Internet Explorer, hãy thay đổi cài đặt 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;
  }
 }