Acesso a arquivos locais com JavaScript


177

Existe manipulação de arquivo local que foi feita com JavaScript? Estou procurando uma solução que possa ser realizada sem a necessidade de instalação, como a necessidade do Adobe AIR .

Especificamente, eu gostaria de ler o conteúdo de um arquivo e gravá-lo em outro arquivo. Neste ponto, não estou preocupado em obter permissões e apenas suponho que já tenho permissões totais para esses arquivos.


Respostas:


87

Se o usuário selecionar um arquivo via <input type="file">, você poderá ler e processar esse arquivo usando a API de arquivos .

Ler ou gravar arquivos arbitrários não é permitido por design. É uma violação da caixa de areia. De Wikipedia -> Javascript -> Segurança :

O JavaScript e o DOM fornecem o potencial para autores mal-intencionados entregarem scripts para execução em um computador-cliente via web. Os autores do navegador contêm esse risco usando duas restrições. Primeiro, os scripts são executados em uma sandbox na qual eles podem executar apenas ações relacionadas à Web, não tarefas de programação de uso geral, como a criação de arquivos .

ATUALIZAÇÃO 2016 : O acesso direto ao sistema de arquivos é possível por meio da API do sistema de arquivos , que é suportada apenas pelo Chrome e Opera e pode acabar não sendo implementada por outros navegadores (com exceção do Edge ). Para detalhes, veja a resposta de Kevin .


28
Droga. Isso é estúpido, é claro. Javascript é supostamente uma linguagem de script independente de aplicativo. Nem todo aplicativo é um navegador da web. Eu vim aqui porque estou interessado em criar scripts para o Photoshop, por exemplo. Mesmo que alguns aplicativos não forneçam classes de acesso a arquivos, faz sentido padronizá-los para os aplicativos onde forem apropriados - um recurso padrão, mas opcional, para que a experiência de um aplicativo seja transferível, mesmo que não seja universalmente aplicável. O que aprendi no Photoshop não será portátil nem para outros hosts Javascript que permitem acesso a arquivos.
Steve314

27
Javascript no idioma e faça o que o ambiente de hospedagem permitir. SpiderMonkey pode fazer qualquer coisa que qualquer outra língua possa fazer. Javascript no navegador está em área restrita.

35
Esta resposta pode estar correta há 3 anos, mas certamente não está mais correta. Veja a resposta de @Horst Walter no HTML5. Ou acesse aqui: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss Sim, na verdade também não estava super correto há três anos. Esta página me ensinou a ler / gravar com o Firefox em 2003 web.archive.org/web/20031229011919/http://www.captain.at/… (bulit para XUL, mas disponível no navegador com XpCom) e a Microsoft tinha node.js de estilo shell script javscript na década de 1990 (e FileIO disponíveis no navegador com ActiveX)
original_username

Não mais possível
SysDragon

158

Apenas uma atualização dos recursos HTML5 está em http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Este excelente artigo explicará em detalhes o acesso ao arquivo local em JavaScript. Resumo do artigo mencionado:

A especificação fornece várias interfaces para acessar arquivos de um sistema de arquivos 'local' :

  1. Arquivo - um arquivo individual; fornece informações somente leitura, como nome, tamanho do arquivo, tipo MIME e uma referência ao identificador do arquivo.
  2. FileList - uma sequência semelhante a uma matriz de objetos File. (Pense <input type="file" multiple>ou arraste um diretório de arquivos da área de trabalho).
  3. Blob - Permite dividir um arquivo em intervalos de bytes.

Veja o comentário de Paul D. Waite abaixo.


7
Não é exatamente um sistema de arquivos verdadeiro, como o que temos usando o plugin Java ou Flash. Por exemplo, não podemos listar os arquivos na área de trabalho do usuário, a menos que ele mesmo os selecione primeiro.
Pacerier

9
Looks como essas APIs estão sendo abandonados: ver w3.org/TR/file-writer-api e html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite

4
Cuidado lá, dada a forma do W3C de roubar a tecnologia útil. A API do sistema de arquivos, implementada apenas no chrome, não está avançando. O arquivo api, tem suporte universal , é aceito como um rascunho de trabalho do w3c e não podemos mais imaginar a vida sem ele. É claro que ainda estamos em um navegador e temos que esperar até que o usuário nos traga o arquivo, mas isso aumenta drasticamente o alcance dos aplicativos da Web e não desaparece tão cedo.
precisa saber é o seguinte

21

ATUALIZAÇÃO Este recurso foi removido desde o Firefox 17 (consulte https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).


No Firefox, você (o programador) pode fazer isso de dentro de um arquivo JavaScript:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

e você (o usuário do navegador) será solicitado a permitir o acesso. (para Firefox, você só precisa fazer isso uma vez toda vez que o navegador é iniciado)

Se o usuário do navegador for outra pessoa, ele precisará conceder permissão.


6
Isso dá um erro de que está obsoleto e você só pode fazer isso em uma extensão, não em javascript do site
Esailija

4
como esse link mostra, esse recurso foi removido nas versões posteriores do firefox. support.mozilla.org/pt-BR/questions/944433
Makan Tayebi 06/06/2013

3
ah, isso é péssimo. Eu recebo segurança e tudo isso, mas precisamos de uma maneira de conceder confiança para executar nossos próprios arquivos javascript localmente.
Jason S

certo. e ainda não encontrei outra maneira de fazer isso.
Makan Tayebi

2
Atualize a resposta para mostrar que está obsoleta. Obrigado.
usar o seguinte comando

20

Conforme mencionado anteriormente, as APIs FileSystem e File , juntamente com a API FileWriter , podem ser usadas para ler e gravar arquivos do contexto de uma guia / janela do navegador em uma máquina cliente.

Há várias coisas relacionadas às APIs FileSystem e FileWriter que você deve conhecer, algumas das quais foram mencionadas, mas vale a pena repetir:

  • Atualmente, as implementações das APIs existem apenas em navegadores baseados no Chromium (Chrome e Opera)
  • Ambas as APIs foram retiradas da faixa de padrões do W3C em 24 de abril de 2014 e, atualmente, são proprietárias
  • A remoção das APIs (agora proprietárias) da implementação de navegadores no futuro é uma possibilidade
  • Uma sandbox (um local no disco fora do qual os arquivos não podem produzir efeito) é usada para armazenar os arquivos criados com as APIs
  • Um sistema de arquivos virtual (uma estrutura de diretórios que não existe necessariamente em disco da mesma forma que quando acessada pelo navegador) é usado para representar os arquivos criados com as APIs

Aqui estão exemplos simples de como as APIs são usadas, direta e indiretamente, em conjunto para fazer o seguinte:

BakedGoods *

Gravar arquivo:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Leia o arquivo:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Usando as APIs File, FileWriter e FileSystem brutas

Gravar arquivo:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Leia o arquivo:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Embora as APIs FileSystem e FileWriter não estejam mais na trilha dos padrões, seu uso pode ser justificado em alguns casos, na minha opinião, porque:

  • O interesse renovado dos fornecedores de navegador que não implementam pode colocá-los de volta nele
  • A penetração no mercado de navegadores de implementação (baseados em cromo) é alta
  • O Google (o principal colaborador do Chromium) não deu uma data de final de vida para as APIs

Se "alguns casos" abrange o seu, no entanto, é para você decidir.

* BakedGoods é mantido por ninguém menos que esse cara aqui :)


7

O NW.js permite criar aplicativos da área de trabalho usando Javascript sem todas as restrições de segurança normalmente colocadas no navegador. Assim, você pode executar executáveis ​​com uma função ou criar / editar / ler / escrever / excluir arquivos. Você pode acessar o hardware, como uso atual da CPU ou RAM total em uso, etc.

Você pode criar um aplicativo de desktop Windows, Linux ou Mac com ele que não exija instalação.

Aqui está uma estrutura para o NW.js, a GUI universal:


1
Também é possível acessar arquivos locais usando o Electron , que é uma estrutura semelhante para aplicativos de desktop JavaScript.
Anderson Green

6

Se você estiver implantando no Windows, o Windows Script Host oferece uma API JScript muito útil para o sistema de arquivos e outros recursos locais. Entretanto, a incorporação de scripts WSH em um aplicativo Web local pode não ser tão elegante quanto você desejar.


3
Gostaria que a solução fosse independente do sistema operacional (pelo menos entre Windows e Mac), para que o host de scripts do Windows não a satisfaça, a menos que exista uma solução comparável para a plataforma Mac
Jared

5

Se você tiver um campo de entrada como

<input type="file" id="file" name="file" onchange="add(event)"/>

Você pode obter o conteúdo do arquivo no formato BLOB:

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}

4

O FSO.js envolve a nova API FileSystem do HTML5, padronizada pelo W3C e fornece uma maneira extremamente fácil de ler, gravar ou percorrer um sistema de arquivos local em área restrita. Como é assíncrono, a E / S do arquivo não interfere na experiência do usuário. :)


1
No momento, o FSO.js não é suportado pelo IE, Mozilla ou Safari.
precisa

2

Se você precisar acessar todo o sistema de arquivos do cliente, ler / gravar arquivos, observar as alterações nas pastas, iniciar aplicativos, criptografar ou assinar documentos, etc., consulte o JSFS.

Ele permite acesso seguro e ilimitado da sua página da web aos recursos do computador no cliente sem usar uma tecnologia de plug-in de navegador como AcitveX ou Java Applet. No entanto, também é necessário instalar um conjunto de softwares.

Para trabalhar com JSFS, você deve ter conhecimento básico em desenvolvimento Java e Java EE (Servlets).

Encontre o JSFS aqui: https://github.com/jsfsproject/jsfs . É gratuito e licenciado sob a GPL


1

Supondo que qualquer arquivo que o código JavaScript possa precisar, deve ser permitido diretamente pelo usuário. Criadores de navegadores famosos não permitem que o JavaScript acesse arquivos em geral.

A idéia principal da solução é: o código JavaScript não pode acessar o arquivo tendo sua URL local. Mas ele pode usar o arquivo tendo seu DataURL: portanto, se o usuário procurar e abrir um arquivo, o JavaScript deverá obter o "DataURL" diretamente do HTML, em vez de obter o "URL".

Em seguida, transforma o DataURL em um arquivo, usando a função readAsDataURL e o objeto FileReader. A fonte e um guia mais completo com um bom exemplo estão em:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader


0

Existe um produto (comercial), "localFS", que pode ser usado para ler e gravar todo o sistema de arquivos no computador cliente.

É necessário instalar um aplicativo Windows pequeno e incluir um pequeno arquivo .js na sua página.

Como um recurso de segurança, o acesso ao sistema de arquivos pode ser limitado a uma pasta e protegido com uma chave secreta.

https://www.fathsoft.com/localfs


-4

se você estiver usando angularjs e aspnet / mvc, para recuperar arquivos json, é necessário permitir o tipo mime na configuração da web

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.