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

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

83 голосов
/ 15 апреля 2009

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

У меня есть решение, которое работает с 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, но я открыт для предложений по любому другому браузеру.

Редактировать: В ответ на вопрос «Почему вы хотите это сделать?»:

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

Ответы [ 3 ]

115 голосов
/ 16 апреля 2009

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

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

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, они основаны на объекте File в Mozilla , но, похоже, они поддерживают только подмножество функций.

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

17 голосов
/ 03 марта 2017

Чтобы прочитать файл, выбранный пользователем, используя диалог открытия файла, вы можете использовать тег <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>
2 голосов
/ 17 августа 2012

Удачного кодирования!
Если вы получаете ошибку в 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;
  }
 }
...