read - Acceso a archivos locales con javascript

mostrar un archivo con javascript

Question

¿Hay alguna manipulación local de archivos que se haya hecho con JavaScript? Estoy buscando una solución que se pueda lograr sin una huella de instalación como requerir AIR.

Específicamente, me gustaría leer los contenidos de un archivo y escribir esos contenidos en otro archivo. En este punto, no estoy preocupado por obtener permisos, solo suponiendo que ya tenga permisos completos para estos archivos.

Answer 1

Si está usando 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>

Answer 2

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

Hay varias cosas relacionadas con las API FileSystem y FileWriter de las que debe tener conocimiento, algunas de las cuales se mencionaron, pero vale la pena repetirlas:

• Las implementaciones de las API actualmente existen solo en los navegadores basados ​​en Chromium (Chrome y Opera)
• Ambas API se quitaron de la pista de normas W3C el 24 de abril de 2014 y, a partir de ahora, están patentadas
• La eliminación de las API (ahora propietarias) de los navegadores de implementación en el futuro es una posibilidad
• Una zona de pruebas (una ubicación en el disco fuera de la cual los archivos no pueden producir ningún efecto) se usa para almacenar los archivos creados con las API.
• Un sistema de archivos virtual (una estructura de directorio que no existe necesariamente en el disco de la misma forma que cuando se accede desde el navegador) se utiliza para representar 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:

BakedGoods *

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 raw File, FileWriter y FileSystem

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 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 implementan puede volver a colocarlos en él
• La penetración en el mercado de los navegadores de implementación (basados ​​en cromo) es alta
• Google (el principal contribuidor a Chromium) no ha dado y la fecha de finalización de la vida a las API

Sin embargo, si "algunos casos" abarca el suyo, es para que usted decida.

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

Answer 3

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

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

• http://nwjs.io

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

• http://ugui.io

Answer 4

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

Answer 5

Si necesita acceder a todo el sistema de archivos en el cliente, leer / escribir archivos, ver carpetas de cambios, iniciar aplicaciones, encriptar o firmar documentos, etc., consulte 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 de navegador como AcitveX o Java Applet. Sin embargo, también debe instalarse una paz de software.

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

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

Answer 6

Si tiene campo de entrada como

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

Puede obtener el 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;
}

Answer 7

Solo una actualización de las características de HTML5 process Este excelente artículo explicará en detalle el acceso al archivo local en Javascript. Resumen del artículo mencionado:

La especificación proporciona varias interfaces para process :

1. Archivo - un archivo individual; proporciona información de solo lectura como nombre, tamaño de archivo, tipo MIME y una referencia al manejador de archivo.
2. FileList - una secuencia similar a una 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.

- Editar -

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

Answer 8

suponiendo que cualquier archivo que pueda necesitar js, debe ser permitido directamente por el usuario, los creadores de navegadores famosos no permiten generalmente el acceso a archivos javascript.

La idea principal de la solución es: javascript no puede acceder al archivo teniendo su URL local. pero puede usar el archivo teniendo su DataURL: así que si el usuario navega por un archivo y lo abre, js debe obtener el "DataURL" directamente de HTML en lugar de obtener "URL".

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

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

Answer 9

FSO.js envuelve la nueva API HTML5 FileSystem que está siendo estandarizada por el W3C y proporciona una manera extremadamente fácil de leer, escribir o atravesar un FileSystem de espacio aislado local. Es asincrónico, por lo que el archivo IO no interferirá con la experiencia del usuario. :)

Answer 10

ACTUALIZAR Esta característica se elimina desde Firefox 17 (ver 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 usted (el usuario del navegador) se le pedirá 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 el permiso.

Answer 11

Si el usuario selecciona un archivo a través de <input type="file"> , puede read y process ese archivo utilizando File API .

No se permite leer o escribir archivos arbitrarios 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 envíen scripts para que se ejecuten en una computadora cliente a través de la web. Los autores del navegador contienen este riesgo al usar dos restricciones. En primer lugar, 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 crear archivos .

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