Чтение содержимого файла на стороне клиента в javascript в различных браузерах

Я пытаюсь предоставить script -одно решение для чтения содержимого файла на клиентской машине через браузер.

У меня есть решение, которое работает с Firefox и Internet Explorer. Это некрасиво, но я только сейчас пытаюсь:

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 :(";
    }
}

Я могу вызвать getFileContents(), и он напишет содержимое в текстовую область fileContents.

Есть ли способ сделать это в других браузерах?

На данный момент меня больше всего интересуют Safari и Chrome, но я открыт для предложений для любого другого браузера.

Изменить: В ответ на вопрос: "Зачем вы хотите это сделать?":

В принципе, я хочу хэшировать содержимое файла вместе с одноразовым паролем на стороне клиента, чтобы я мог отправить эту информацию в качестве подтверждения.

Ответы

Ответ 1

Отредактировано для добавления информации о API файлов

Поскольку я изначально написал этот ответ, File API был предложен как стандарт и реализован в большинстве браузеров (начиная с IE 10, где добавлена поддержка API FileReader, описанная здесь, хотя еще не API File). API немного сложнее, чем старый API Mozilla, поскольку он предназначен для поддержки асинхронного чтения файлов, лучшей поддержки двоичных файлов и декодирования различных текстовых кодировок. Существует некоторая документация, доступная в Mozilla Developer Network, а также различные примеры в Интернете. Вы использовали бы его следующим образом:

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";
    }
}

Оригинальный ответ

В WebKit не существует способа сделать это (таким образом, Safari и Chrome). Единственные ключи, которые File имеют fileName и fileSize. Согласно сообщению commit для поддержки File и FileList, они вдохновлены Mozilla File object, но они, похоже, поддерживают только часть функций.

Если вы хотите изменить это, вы всегда можете отправить патч в проект WebKit. Другая возможность - предложить API Mozilla для включения в HTML 5; WHATWG список рассылки, вероятно, является лучшим местом для этого. Если вы это сделаете, гораздо более вероятно, что это будет кросс-браузерный способ сделать это, по крайней мере, через пару лет. Конечно, отправка патча или предложение для включения в HTML 5 означает некоторую работу, защищающую идею, но тот факт, что Firefox уже реализует ее, дает вам кое-что для начала.

Ответ 2

Чтобы прочитать файл, выбранный пользователем, используя диалог открытия файла, вы можете использовать тег <input type="file">. Вы можете найти информацию о нем из MSDN. Когда файл выбран, вы можете использовать FileReader API для чтения содержимого.

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>

Ответ 3

Счастливое кодирование!
Если вы получили сообщение об ошибке в Internet Explorer, измените параметры безопасности, чтобы разрешить 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;
  }
 }