Cómo leer y escribir en un archivo usando JavaScript

Question

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

del lado del navegador

Answer 1

Nº Javascript no tiene permiso para escribir en la máquina cliente sin una gran cantidad de opciones de seguridad que tiene que ser desactivado

Answer 2

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

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

Answer 3

No se puede hacer archivos de E/S en el lado del cliente mediante javascript ya que eso supondrí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 entrada/salida en el servidor

Answer 4

Si usted es usando JScript (Javascript de Microsoft) para hacer scripts locales usando WSH (¡NO en un navegador!) puede usar Scripting.FileSystemObject para acceder al sistema de archivos.

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

MSDN here

Answer 5

aquí está la propuesta de Mozilla

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

esto se implementa con un conmutador de compilación en spidermonkey, y también en ExtendScript de adobe. Además (creo) obtienes el objeto File en las extensiones de Firefox.

rinoceronte tiene una (en lugar rudementary) Función readFile https://developer.mozilla.org/en/Rhino_Shell

para operaciones de archivo más complejas en Rhino, puede utilizar métodos java.io.File.

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

Answer 6

Tendrá que recurrir a Flash, Java o Silverlight. En el caso de Silverlight, estarás mirando Isolated Storage. Eso te permitirá escribir en archivos en tu propio patio de juegos en el disco de los usuarios. Sin embargo, no te permitirá escribir fuera de tu patio de recreo.

Answer 7

Para completar, el PO no dice que él está tratando de hacer esto en un navegador (si lo es, como se ha dicho, en general no es posible)

Sin embargo Javascript per se permita esto; se puede hacer con javascript en el lado del servidor.

ver este documentation on the Javascript File class

Editar: Ese vínculo fue a la documentación de Sun, que ahora se han movido por Oracle.

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

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

Answer 8

Para crear el archivo tratan

function makefile(){ 
    var fso; 
    var thefile; 

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

    thefile.close() 
    } 

Crear el directorio en el Unidad C porque Windows tiene seguridad contra escribir desde la web , por ejemplo, crear una carpeta llamada "tmp" en la unidad C.

Answer 9

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

• File System APIs

• Native Drag&Drop File Access

podría utilizar el 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/

Answer 10

Esta función de 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 IE Browser ya que Firefox y Chrome han considerado este código como un problema de seguridad y lo ha bloqueado.

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

Answer 11

Para Firefox:

var file = Components.classes["@mozilla.org/file/local;1"]. 
     createInstance(Components.interfaces.nsILocalFile); 
file.initWithPath("/home"); 

Ver https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

Para otros, echa un vistazo a la aplicación TiddlyWiki para ver cómo lo hace.

Answer 12

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

Dicho esto, hay algunas maneras de trabajar alrededor de ella, dependiendo de lo que está tratando de hacer:

1. Si se trata de su propio sitio, puede incrustar un applet de Java 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 de Java es como un software ejecutable que tiene acceso completo a la computadora local.

2. Chrome es compatible con un sistema de archivos que es una porción de espacio aislado del sistema de archivos local. Vea this page para más detalles.Esto posiblemente le permita guardar cosas temporalmente de manera local. Sin embargo, esto no es compatible con otros navegadores.

3. Si no está limitado al navegador, Node.js tiene una interfaz de sistema de archivos completa. Vea aquí para su file system documentation. 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.

Answer 13

Aquí está la solución de escritura para Chrome v52 + (usuario todavía necesita seleccionar una gama del 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 la escritura de datos generados en grandes lado del cliente.
De lo contrario se sugiere emplear FileSaver.js para salvar Blob/Archivos

Answer 14

Actualmente, los archivos pueden ser escritos y leídos desde el contexto de una pestaña del navegador/ventana con los File, FileWriter, y FileSystem API, aunque hay advertencias para su uso (ver la cola de esta respuesta).

Pero para responder a su pregunta:

Usando BakedGoods archivo *

Comentario:

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

de archivos de lectura:

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

Uso del archivo en bruto, API FileWriter y FileSystem archivo

Comentario:

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

de archivos de lectura:

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 pidió la derecha? Tal vez tal vez no. Los dos últimos de las API:

• el momento, solo implementado en los navegadores basados ​​en cromo (cromo & Opera)
• ¿Se han tomado fuera de la pista estándares W3C, ya partir de ahora son APIs propietarios
• mayo ser eliminado de los navegadores de aplicación en el futuro
• Constrict la creación de archivos a un entorno limitado (un lugar fuera de los cuales los archivos pueden producir ningún efecto) en el disco

Además, la especificación FileSystem no define ninguna guía sobre cómo deben aparecer 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 directorio que no existe necesariamente en el disco de la misma forma que cuando se accede desde el navegador), dentro de la cual se crean los directorios y archivos con las API se colocan.

Aunque puede que pueda escribir archivos en un sistema con las API, ubicar los archivos sin las API (bueno, sin la API FileSystem) podría ser un asunto no trivial.

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

Si está abierto a soluciones no nativas, Silverlight también permite archivos E/S de un concurso de pestaña/ventana a través del IsolatedStorage. Sin embargo, se requiere managed code 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 complementaria, dejando uno con 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 usar para realizar operaciones de almacenamiento comunes en todas las instalaciones de almacenamiento nativas y no nativas. Lo mantiene este tipo aquí mismo).