¿Cómo leer y escribir en un archivo usando JavaScript?


177

¿Alguien puede dar un código de muestra para leer y escribir un archivo usando JavaScript?


2
¿Por qué lo necesitas? Tal vez hay soluciones alternativas.
Ionuț G. Stan


1
De hecho, se ha preguntado muchas veces antes
annakata

1
Encontré este recurso con respecto al almacenamiento de archivos del lado del cliente. html5rocks.com/en/tutorials/offline/storage De lo que he reunido, HTML5 en realidad permite que Websights almacene información en el disco duro local del usuario, pero en una mansión más parecida a una base de datos. El navegador gestiona el almacenamiento de archivos e impone ciertos límites para evitar que la World Wide Web cargue los discos duros de las personas hasta el borde. Todavía no son completamente infalibles, pero están siendo modificados, al menos según este artículo. Lea para más detalles.
Garrett

2
Use Ajax y con PHP maneja la lectura y escritura de archivos. Si desea manejar la escritura en archivos del lado del cliente, debe olvidarlo. Sería necesario deshabilitar muchas opciones de seguridad en el servidor y se quedaría con un sitio extremadamente inseguro. Si no desea utilizar PHP, tal vez lo que desea lograr se puede hacer utilizando cookies de JavaScript para almacenar datos en la computadora del cliente.
Dan Bray

Respuestas:


64

Para completar, el OP no declara que está buscando hacer esto en un navegador (si lo está, como se ha dicho, generalmente no es posible)

Sin embargo, javascript per se permite esto; Se puede hacer con JavaScript del lado del servidor.

Consulte esta documentación sobre la clase de archivo Javascript

Editar : Ese enlace fue a los documentos de Sun que ahora Oracle ha movido.

Para mantenerse al día con los tiempos, aquí está la documentación de node.js para la clase FileSystem: http://nodejs.org/docs/latest/api/fs.html

Editar (2) : puede leer archivos del lado del cliente ahora con HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/


3
¿Es posible escribir en archivos locales usando HTML5 también?
Anderson Green

1
Además, dependiendo de su situación, puede hacer una llamada ajax a un script php y volcar los datos de esa manera. Esto fue útil en mi situación en la que quería almacenar algunos datos generados en el lado de JavaScript, pero no importaba cómo llegaron allí.
Dustin Graham

1
@DustinGraham, en realidad ahora con las API de Chrome que puede archivos realidad de escritura en el lado del cliente a través de JavaScript ¿verdad?
Pacerier

40

No. JavaScript del lado del navegador no tiene permiso para escribir en la máquina cliente sin tener que deshabilitar muchas opciones de seguridad


44
@marcgg: Eso hace que esta respuesta sea incompleta, no incorrecta. Y, seamos sinceros, es muy probable que esta respuesta hace cubrir caso de uso de la OP.
Carreras de ligereza en órbita

36
Si el OP planeaba usar javascript fuera del navegador, es bastante infrecuente que probablemente lo hubieran mencionado. No es irrazonable (y definitivamente no es incorrecto) asumir un navegador. +1 (para compensar marcgg's -1).
Michael Martin-Smucker

2
@LightnessRacesinOrbit El botón de voto negativo no significa que se piense que la respuesta es incorrecta. Su texto de información sobre herramientas es This answer is not useful.
Desaliñado

1
@ Mike: no fue cuando se escribió esta respuesta, y todavía es razonable suponer JS del lado del navegador de forma predeterminada.
Quentin

16

¡El futuro está aquí! Las propuestas están más cerca de completarse, no más ActiveX o flash o java. Ahora podemos usar:

Puede usar Arrastrar / Soltar para obtener el archivo en el navegador, o un simple control de carga. Una vez que el usuario ha seleccionado un archivo, puede leerlo con Javascript: http://www.html5rocks.com/en/tutorials/file/dndfiles/


Los enlaces están rotos ahora.
Prometeo

Los enlaces están rotos de nuevo, ambos son el mismo enlace, pero con significados diferentes. Roto.
dentro del

@insidesin corregido
Thomas Shields

14

aquí está la propuesta de mozilla

http://www-archive.mozilla.org/js/js-file-object.html

esto se implementa con un interruptor de compilación en spidermonkey, y también en el script extendido de adobe. Además (creo) obtienes el objeto File en extensiones de firefox.

Rhino tiene una función readFile (más bien grosera) https://developer.mozilla.org/en/Rhino_Shell

para operaciones de archivo más complejas en rhino, puede usar los métodos java.io.File.

Sin embargo, no obtendrá nada de esto en el navegador. Para una funcionalidad similar en un navegador, puede utilizar las funciones de base de datos SQL de HTML5, persistencia del cliente, cookies y objetos de almacenamiento flash.


12

Esta función Javascript presenta un cuadro de diálogo completo "Guardar como" para el usuario que ejecuta esto a través del navegador. El usuario presiona OK y el archivo se guarda.

Editar: El siguiente código solo funciona con el navegador IE, ya que Firefox y Chrome han considerado este código como un problema de seguridad y han bloqueado su funcionamiento.

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

Invocar la función:

save_content_to_file("Hello", "C:\\test");

1
ir = createElement ('iframe'); - iframe es iFrame ID.
Temp

Además, ¿funcionará en todos los sistemas operativos (siempre que se elija una ubicación de archivo válida?)
Anderson Green

44
Esta es una buena solución pero, ¿funciona solo con IE? Intenté IE y FF y con FF no funciona.
u.gen

9

Si está utilizando JScript (Javascript de Microsoft) para hacer secuencias de comandos locales utilizando WSH (¡NO en un navegador!), Puede utilizarlo Scripting.FileSystemObjectpara acceder al sistema de archivos.

Creo que puede acceder al mismo objeto en IE si desactiva muchas configuraciones de seguridad, pero sería una muy, muy mala idea.

MSDN aquí


Quería hacer esto en una htaaplicación y eso lo resuelve
chiliNUT

8

Actualmente, los archivos se pueden escribir y leer desde el contexto de una ventana / pestaña del navegador con File , FileWriter y FileSystem API , aunque existen advertencias para su uso (consulte el reverso de esta respuesta).

Pero para responder tu pregunta:

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

Justo lo que pediste, ¿verdad? Tal vez tal vez no. Las dos últimas de las API:

  • Actualmente solo se implementan en navegadores basados ​​en Chromium (Chrome y Opera)
  • Han sido retirados del seguimiento de estándares del W3C y, a partir de ahora, son API patentadas
  • Puede ser eliminado de los navegadores implementadores en el futuro
  • Restrinja la creación de archivos a un entorno limitado (una ubicación fuera de la cual los archivos no pueden producir ningún efecto) en el disco

Además, la especificación FileSystem no define pautas sobre cómo aparecerán las estructuras de directorios en el disco. En los navegadores basados ​​en Chromium, por ejemplo, el sandbox tiene un sistema de archivos virtual (una estructura de directorios que no existe necesariamente en el disco de la misma forma que cuando se accede desde el navegador), dentro del cual los directorios y archivos creados con Se colocan las API.

Entonces, aunque puede escribir archivos en un sistema con las API, localizar los archivos sin las API (bueno, sin la API de FileSystem) podría ser un asunto no trivial.

Si puede lidiar con estos problemas / limitaciones, estas API son prácticamente la única forma nativa de hacer lo que ha pedido.

Si está abierto a soluciones no nativas, Silverlight también permite la entrada y salida de archivos desde un concurso de pestañas / ventanas a través de IsolatedStorage . Sin embargo, se requiere código administrado para utilizar esta instalación; Una solución que requiere escribir dicho código está más allá del alcance de esta pregunta.

Por supuesto, una solución que hace uso de código administrado complementario, dejando uno con solo Javascript para escribir, está dentro del alcance de esta pregunta;):

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods es una biblioteca de Javascript que establece una interfaz uniforme que se puede utilizar para realizar operaciones de almacenamiento comunes en todas las instalaciones de almacenamiento nativas y no nativas. Es mantenido por este tipo aquí:).



5

En el contexto del navegador, Javascript puede LEER el archivo especificado por el usuario. Consulte el blog de Eric Bidelman para obtener detalles sobre la lectura de archivos con File API. Sin embargo, no es posible que Javascript basado en navegador ESCRIBA el sistema de archivos de la computadora local sin deshabilitar algunas configuraciones de seguridad porque se considera como una amenaza de seguridad para cualquier sitio web cambiar arbitrariamente su sistema de archivos local.

Dicho esto, hay algunas formas de solucionarlo dependiendo de lo que intente hacer:

  1. Si es su propio sitio, puede incrustar un Java Applet en la página web. Sin embargo, el visitante debe instalar Java en la máquina local y recibirá una alerta sobre el riesgo de seguridad. El visitante debe permitir que se cargue el applet. Un Applet Java es como un software ejecutable que tiene acceso completo a la computadora local.

  2. Chrome admite un sistema de archivos que es una parte de espacio aislado del sistema de archivos local. Vea esta página para más detalles. Posiblemente, esto le permita guardar temporalmente cosas localmente. Sin embargo, esto no es compatible con otros navegadores.

  3. Si no está limitado al navegador, Node.js tiene una interfaz completa del sistema de archivos. Consulte aquí la documentación del sistema de archivos . Tenga en cuenta que Node.js puede ejecutarse no solo en servidores, sino también en cualquier computadora cliente, incluidas las ventanas. El corredor de prueba de JavaScript Karma se basa en Node.js. Si solo desea programar en javascript en la computadora local, esta es una opción.


3

Para crear un archivo intente

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Cree su directorio en la unidad C porque Windows tiene seguridad contra escritura desde la web, por ejemplo, cree una carpeta llamada "tmp" en la unidad C.


2

Tendrá que recurrir a Flash, Java o Silverlight. En el caso de Silverlight, verás Almacenamiento aislado . Eso le permitirá escribir en archivos en su propio patio de juegos en el disco de los usuarios. Sin embargo, no te permitirá escribir fuera de tu patio de recreo.


1

No puede hacer esto de ninguna manera entre navegadores. IE tiene métodos para permitir que las aplicaciones "confiables" usen objetos ActiveX para leer / escribir archivos, pero desafortunadamente eso es todo.

Si está buscando guardar información del usuario, lo más probable es que necesite usar cookies.


44
¿Y la barrera para convertirse en una aplicación "confiable" es qué precisamente? ¿Un diálogo de confirmación?
Breton

@Philip, nadie dijo que necesita ser un navegador cruzado. Una solución diferente para cada navegador está bien.
Pacerier

1

De una prueba de ReactJS, el siguiente código escribe con éxito un archivo:

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

El archivo se escribe en el directorio que contiene las pruebas, por lo que escribir en un archivo JSON real '* .json' crea un bucle.


0

No puede hacer E / S de archivos en el lado del cliente usando JavaScript, ya que eso sería un riesgo de seguridad. Tendría que hacer que descarguen y ejecuten un exe, o si el archivo está en su servidor, use AJAX y un lenguaje del lado del servidor como PHP para hacer la E / S en el lado del servidor


1
Esto no proporciona una respuesta a la pregunta. Para criticar o solicitar una aclaración de un autor, deje un comentario debajo de su publicación.
Harpun

@harpun, exactamente. Elimine esta respuesta y conviértala en un comentario.
Pacerier

0

Hay dos formas de leer y escribir un archivo usando JavaScript

  1. Usar extensiones de JavaScript

  2. Usando una página web y objetos Active X


-1

Aquí hay una solución de escritura para Chrome v52 + (el usuario aún debe seleccionar una gama de destino ...)
fuente: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>
const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

El más adecuado para escribir grandes datos generados en el lado del cliente.
De lo contrario, sugiero usar FileSaver.js para guardar Blob / Files

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.