Acesso a arquivos locais com JavaScript

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.

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 .

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.

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.

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

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.

• http://nwjs.io

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

• http://ugui.io

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.

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

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. :)

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

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

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

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>