Чтение текстового файла на стороне клиента с помощью Javascript

Я хочу прочитать файл (на стороне клиента) и получить содержимое в массиве. Это будет только один файл. У меня есть следующее, и это не сработает. 'query_list' - это текстовое поле, где я хочу отображать содержимое файла.

<input type="file" id="file" name="file" enctype="multipart/form-data"/>

    <script>
       document.getElementById('file').addEventListener('change', readFile, false);

       function readFile (evt) {
           var files = evt.target.files;
           var file = files[0];

          var fh = fopen(file, 0);
          var str = "";
          document.getElementById('query_list').textContent = str;
          if(fh!=-1) {
             length = flength(fh);        
             str = fread(fh, length);     
             fclose(fh);                   
           } 
           document.getElementById('query_list').textContent = str;
        }
      </script>

Как мне это сделать? В конце концов я хочу перебрать массив и запустить некоторые SQL-запросы.

Ответ 1

Если вы хотите читать файлы на клиенте с помощью HTML5 FileReader, вы должны использовать Firefox, Chrome или IE 10+. Если это так, в следующем примере читается текстовый файл на клиенте.

ваш пример пытается использовать fopen, о котором я никогда не слышал (на клиенте)

http://jsfiddle.net/k3j48zmt/

   document.getElementById('file').addEventListener('change', readFile, false);

   function readFile (evt) {
       var files = evt.target.files;
       var file = files[0];           
       var reader = new FileReader();
       reader.onload = function(event) {
         console.log(event.target.result);            
       }
       reader.readAsText(file)
    }

Для поддержки IE <10 вам нужно изучить объект ActiveX, например ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspx, Вы столкнулись с проблемой безопасности. Если вы запустите IE, разрешив все объекты ActiveX (для вашего сайта), он должен работать.

Ответ 2

Существует такая вещь, как HTML5 File API для доступа к локальным файлам, выбранным пользователем, без их загрузки в любом месте.

Это совершенно новая функция, но поддерживается большинством современных браузеров.

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

Есть одна проблема с этим: вы не можете читать большие файлы (~ 400 МБ и более), потому что прямые функции FileAPI пытаются загрузить весь файл в память.

Если вам нужно прочитать большие файлы или найти что-то там, или перейдите по индексу строки my LineNavigator, что позволит вам читать, перемещаться и искать в файлах любого размера. Попробуйте в jsFiddle! Это очень просто:

var navigator = new FileNavigator(file);    

navigator.readSomeLines(0, function linesReadHandler(err, index, lines, eof, progress) {    
    // Some error
    if (err) return;

    // Process this line bucket
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i]; 
        // Do something with it
    }

    // End of file
    if (eof) return;

    // Continue reading
    navigator.readSomeLines(index + lines.length, linesReadHandler);
});

Ответ 3

Ну, я получил ответ, но его разные:

<input type="file" id="fi" />
<button onclick="handleFile(); return false;">click</button>

function handleFile() {
    var preview = document.getElementById('prv')
    var file = document.getElementById('fi').files[0];
    var div = document.body.appendChild(document.createElement("div"));
    div.innerHTML = file.getAsText("utf-8");
}

Это будет работать в FF 3.5 - 3.6, и это будет. FF 4 и WebKit вам необходимо использовать FileReader, как упоминалось Хуаном Мендесом.

Для IE вы можете найти решение Flash.

Ответ 4

Я работаю там, но все равно хочу внести свой вклад, потому что он работает хорошо: вы можете использовать filepicker.io для чтения api, чтобы сделать именно это. Вы можете передать элемент dom и вернуть содержимое для текстовых или двоичных данных даже в IE8 +