Acceso a archivos locales con JavaScript

¿Hay manipulación local de archivos que se ha hecho con JavaScript? Estoy buscando una solución que se pueda lograr sin necesidad de instalar, como Adobe AIR .

Específicamente, me gustaría leer el contenido de un archivo y escribir ese contenido en otro archivo. En este punto, no estoy preocupado por obtener permisos y solo asumo que ya tengo permisos completos para estos archivos.

Si el usuario selecciona un archivo mediante <input type="file">, puede leer y procesar ese archivo utilizando la API de archivo .

Leer o escribir archivos arbitrarios no está permitido por diseño. Es una violación de la caja de arena. De Wikipedia -> Javascript -> Seguridad :

JavaScript y el DOM brindan la posibilidad de que los autores maliciosos entreguen scripts para que se ejecuten en una computadora cliente a través de la web. Los autores del navegador contienen este riesgo usando dos restricciones. Primero, los scripts se ejecutan en un entorno limitado en el que solo pueden realizar acciones relacionadas con la web, no tareas de programación de propósito general como la creación de archivos .

ACTUALIZACIÓN 2016 : el acceso al sistema de archivos directamente es posible a través de la API del sistema de archivos , que solo es compatible con Chrome y Opera y puede que no sea implementado por otros navegadores (con la excepción de Edge ). Para más detalles vea la respuesta de Kevin .

Solo hay una actualización de las características HTML5 en http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Este excelente artículo explicará en detalle el acceso a archivos locales en JavaScript. Resumen del artículo mencionado:

La especificación proporciona varias interfaces para acceder a archivos desde un sistema de archivos 'local' :

1. Archivo: un archivo individual; proporciona información de solo lectura, como nombre, tamaño de archivo, tipo MIME y una referencia al identificador de archivo.
2. FileList: una secuencia tipo matriz de objetos File. (Piense <input type="file" multiple>o arrastre un directorio de archivos desde el escritorio).
3. Blob: permite cortar un archivo en rangos de bytes.

Vea el comentario de Paul D. Waite a continuación.

ACTUALIZACIÓN Esta característica se elimina desde Firefox 17 (consulte https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).

En Firefox, usted (el programador) puede hacer esto desde un archivo JavaScript:

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

y se le pedirá a usted (el usuario del navegador) que permita el acceso. (para Firefox solo necesita hacer esto una vez cada vez que se inicia el navegador)

Si el usuario del navegador es otra persona, debe otorgar permiso.

Como se mencionó anteriormente, las API FileSystem y File , junto con FileWriter API , se pueden usar para leer y escribir archivos desde el contexto de una pestaña / ventana del navegador a una máquina cliente.

Debe tener en cuenta varias cosas relacionadas con las API FileSystem y FileWriter, algunas de las cuales se mencionaron, pero vale la pena repetir:

• Las implementaciones de las API actualmente solo existen en los navegadores basados ​​en Chromium (Chrome & Opera)
• Ambas API fueron retiradas de la pista de estándares del W3C el 24 de abril de 2014, y a partir de ahora son propietarias
• La eliminación de las API (ahora propietarias) de la implementación de navegadores en el futuro es una posibilidad
• Se utiliza una caja de arena (una ubicación en el disco fuera de la cual los archivos no pueden producir ningún efecto) para almacenar los archivos creados con las API
• Se utiliza un sistema de archivos virtual (una estructura de directorio que no existe necesariamente en el disco en la misma forma que cuando se accede desde el navegador) representa los archivos creados con las API

Aquí hay ejemplos simples de cómo se usan las API, directa e indirectamente, en conjunto para hacer estas cosas:

Productos horneados *

Escribir archivo:

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

Leer archivo:

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

Uso de las API de File, FileWriter y FileSystem sin formato

Escribir archivo:

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

Leer archivo:

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

Aunque las API FileSystem y FileWriter ya no están en la pista de los estándares, su uso puede justificarse en algunos casos, en mi opinión, porque:

• El renovado interés de los proveedores de navegadores que no se implementan puede colocarlos nuevamente en él.
• La penetración en el mercado de la implementación de navegadores (basados ​​en cromo) es alta
• Google (el principal contribuyente a Chromium) no ha dado una fecha de finalización de vida a las API

Sin embargo, si "algunos casos" abarca los suyos, es decisión suya.

* BakedGoods es mantenido por nada menos que este tipo aquí :)

NW.js le permite crear aplicaciones de escritorio usando Javascript sin todas las restricciones de seguridad que generalmente se colocan en el navegador. Por lo tanto, puede ejecutar ejecutables con una función o crear / editar / leer / escribir / eliminar archivos. Puede acceder al hardware, como el uso actual de la CPU o el ram total en uso, etc.

Puede crear una aplicación de escritorio de Windows, Linux o Mac con ella que no requiera instalación.

• http://nwjs.io

Aquí hay un marco para NW.js, la GUI universal:

• http://ugui.io

Si está implementando en Windows, Windows Script Host ofrece una API JScript muy útil para el sistema de archivos y otros recursos locales. Sin embargo, incorporar scripts WSH en una aplicación web local puede no ser tan elegante como desearía.

Si tienes un campo de entrada como

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

Puede acceder al contenido del archivo en formato BLOB:

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

FSO.js envuelve la nueva API HTML5 FileSystem que está siendo estandarizada por el W3C y proporciona una forma extremadamente fácil de leer, escribir o atravesar un sistema de archivos de espacio aislado local. Es asíncrono, por lo que la E / S de archivo no interferirá con la experiencia del usuario. :)

Si necesita acceso a todo el sistema de archivos en el cliente, leer / escribir archivos, ver carpetas para cambios, iniciar aplicaciones, cifrar o firmar documentos, etc., eche un vistazo a JSFS.

Permite el acceso seguro e ilimitado desde su página web a los recursos de la computadora en el cliente sin usar una tecnología de complemento del navegador como AcitveX o Java Applet. Sin embargo, también debe instalarse un software tranquilo.

Para trabajar con JSFS, debe tener conocimientos básicos sobre el desarrollo de Java y Java EE (Servlets).

Encuentre JSFS aquí: https://github.com/jsfsproject/jsfs . Es gratis y con licencia bajo GPL

Asumiendo que cualquier archivo que pueda necesitar el código JavaScript, debe ser permitido directamente por el usuario. Los creadores de navegadores famosos no permiten que JavaScript acceda a los archivos en general.

La idea principal de la solución es: el código JavaScript no puede acceder al archivo al tener su URL local. Pero puede usar el archivo al tener su DataURL: así que si el usuario navega por un archivo y lo abre, JavaScript debería obtener el "DataURL" directamente del HTML en lugar de obtener el "URL".

Luego convierte el DataURL en un archivo, utilizando la función readAsDataURL y el objeto FileReader. La fuente y una guía más completa con un buen ejemplo están en:

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

Hay un producto (comercial), "localFS", que se puede usar para leer y escribir todo el sistema de archivos en la computadora cliente.

Se debe instalar una pequeña aplicación de Windows y se debe incluir un pequeño archivo .js en su página.

Como característica de seguridad, el acceso al sistema de archivos puede limitarse a una carpeta y protegerse con una clave secreta.

https://www.fathsoft.com/localfs

si está utilizando angularjs y aspnet / mvc, para recuperar archivos json, debe permitir el tipo mime en la configuración web

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>