Lendo arquivo de texto do lado do cliente usando Javascript

Eu quero ler um arquivo (no lado do cliente) e obter o conteúdo em uma matriz. Será apenas um arquivo. Eu tenho o seguinte e não funciona. 'query_list' é uma área de 'query_list' qual desejo exibir o conteúdo do arquivo.

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

Como devo fazer isso? Eventualmente eu quero fazer um loop sobre o array e executar algumas consultas SQL.

Se você quiser ler arquivos no cliente usando o FileReader do HTML5 , use o Firefox, o Chrome ou o IE 10+. Se isso for verdade, o exemplo a seguir lê um arquivo de texto no cliente.

seu exemplo tenta usar o fopen do qual nunca ouvi falar (no cliente)

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) } 

Para suporte ao IE <10, é necessário investigar o uso de um objeto ActiveX, como o ADO.Stream Scripting.FileSystemObject http://msdn.microsoft.com/en-us/library/2z9ffy99(v=vs.85).aspx, mas você Vou me deparar com um problema de segurança. Se você executar o IE permitindo todos os objetos ActiveX (para o seu site), ele deve funcionar.

Existe a API do arquivo HTML5 para acessar arquivos locais escolhidos pelo usuário, sem carregá-los em lugar algum.

É um recurso bastante novo, mas suportado pela maioria dos navegadores modernos .

Eu recomendo fortemente verificar este ótimo artigo para ver como você pode usá-lo.

Há um problema com isso, você não pode ler arquivos grandes (~ 400 MB e maiores), porque as funções FileAPI para a frente tentando carregar o arquivo inteiro na memory.

Se você precisar ler arquivos grandes ou procurar algo lá, ou navegar por índice de linha, verifique meu LineNavigator , que permite que você leia, navegue e pesquise arquivos de qualquer tamanho. Experimente no jsFiddle! É super fácil de usar:

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

Bem, eu tenho batido para a resposta, mas é diferente:

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

Isso funcionará no FF 3.5 – 3.6 e pronto. FF 4 e WebKit você precisa usar o FileReader como mencionado por Juan Mendes.

Para o IE, você pode encontrar uma solução em Flash.

Eu trabalho lá, mas ainda queria contribuir porque funciona bem: você pode usar o arquivo filepicker.io read api para fazer exatamente isso. Você pode passar um elemento dom e recuperar o conteúdo, para texto ou dados binários, mesmo no IE8 +