¿Cómo escribir en un archivo(directorio de usuarios) usando JavaScript?

jquery html5

Question

Quiero escribir en txt de cualquier archivo desde Chrome (Todas las versiones) usando html5 y javascript o jquery.

Probé la API de FileSystem y el código que probé es:

function onFs(fs) { console.log(''test''); fs.root.getFile(''log.txt'', {create: true, exclusive: true}, function(fileEntry) { // fileEntry.isFile === true // fileEntry.name == ''log.txt'' // fileEntry.fullPath == ''/log.txt'' fileEntry.getMetaData(function(md) { console.log(md.modificationTime.toDateString()); }, onError); }, onError ); } window.webkitRequestFileSystem(TEMPORARY, 1024*1024 /*1MB*/, onFs);

Pero no funciona.

¿Hay alguna forma de escribir en el archivo?

Answer 1

Quiero escribir el archivo en el directorio de usuarios

No puede escribir directamente el archivo en el sistema de archivos del usuario.

Después de buscar SO para preguntas similares para resolver con precisión la pregunta, ¿pude $ cat contenido del archivo creado en plnkr después de esta answer publicada por @Iain en ¿Dónde se almacena el almacenamiento del sistema de archivos PERSISTENT con Chrome? . El archivo se escribió en el sistema de archivos del usuario en el ~/.config/[chrome, chromium] .

Administrador de archivos usado para navegar

  ~/.config/[chrome, chromium]/Default/File System

para revisar el directorio; el archivo que contiene el texto escrito a continuación se encontró en una carpeta que tiene dos dígitos como nombre de carpeta, luego dentro de dos subdirectorios adicionales; un subdirectorio que tiene una letra minúscula como nombre de carpeta; dentro de este subdirectorio había otro subdirectorio que tenía dos dígitos como nombre de carpeta; el archivo escrito por window.webkitRequestFileSystem tenía ocho dígitos como nombre de archivo, sin extensión, aunque tenía el tipo MIME "text/plain" correcto; establecido en la propiedad de type Blob .

Luego en la terminal

  $ cd ~/.config/[chrome, chromium]/Default/File/ System/[three digits]/[lowercase letter]/[two digits]

  $ cat [eight digits]
  Lorem Ipsum

No he intentado crear un archivo .sh y ejecutarlo. Probablemente requeriría colocar el directorio en la path o mover el archivo a una carpeta en la path existente; establecer los permissions apropiados para el archivo. Posiblemente podría ajustar esto en la configuración del navegador Chrome / Chrome, aunque tampoco lo he intentado.

Probablemente podría escribir un comando para copiar o mover el archivo en /path/to/file a una carpeta en path , y ejecutar el archivo; u otro enfoque.

Puede usar el atributo de download de a elemento para permitir la descarga del archivo creado por createWriter al sistema de archivos del usuario.

El sistema de archivos está protegido.

Debido a que el sistema de archivos está protegido, una aplicación web no puede acceder a los archivos de otra aplicación. Tampoco puede leer o escribir archivos en una carpeta arbitraria (por ejemplo, Mis imágenes y Mis documentos) en el disco duro del usuario.

ver también en Definititons

almacenamiento persistente El almacenamiento persistente es el almacenamiento que permanece en el navegador a menos que el usuario lo elimine o la aplicación lo elimine.
almacenamiento temporal El almacenamiento transitorio está disponible para cualquier aplicación web. Es automático y no es necesario solicitarlo, pero el navegador puede eliminar el almacenamiento sin previo aviso.

Quiero escribir el archivo en el directorio de usuarios porque tiene que ser entendible por el usuario.

Editar, actualizado

Puede usar el método descrito anteriormente. Es decir, use un administrador de archivos en para revisar cómo aparecen las carpetas y los archivos en

  ~/.config/[chrome, chromium]/Default/File System

  ## do stuff with contents of file written by `window.requestFilesystem`

Para ver el archivo en Chrome / DevTools FileSystem , puede navegar a DevTools -> Experiments -> verificar la FileSystem inspection , log.txt debe aparecer en la pestaña Resources en FileSystem .

También puede navegar al archivo en la barra de direcciones usando URL

filesystem:http://run.plnkr.co/temporary/log.txt

que debe tener contenido

Lorem Ipsum

o

filesystem:http://run.plnkr.co/temporary/

para ver todos los archivos y directorios en la raíz del sistema de archivos temporal

Consulte Explorar la API de FileSystem

Primero inicie Chrome / Chrome con el --allow-file-access-from-files , consulte ¿Cómo hago que el indicador Google Chrome "--allow-file-access-from-files" sea permanente? .

próximo

window.requestFileSystem  = window.requestFileSystem 
                            || window.webkitRequestFileSystem;

agregar manejo de errores

function errorHandler(e) {
  var msg = '''';

  switch (e.message) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = ''QUOTA_EXCEEDED_ERR'';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = ''NOT_FOUND_ERR'';
      break;
    case FileError.SECURITY_ERR:
      msg = ''SECURITY_ERR'';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = ''INVALID_MODIFICATION_ERR'';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = ''INVALID_STATE_ERR'';
      break;
    default:
      msg = ''Unknown Error'';
      break;
  };

  console.log(''Error: '' + msg);
}

Entonces deberías poder

function writeFile(fs) {

  fs.root.getFile(''log.txt'', {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log(''Write completed.'');
        // call `readFile` here
        window.requestFileSystem(window.TEMPORARY, 1024*1024, readFile, errorHandler);

      };

      fileWriter.onerror = function(e) {
        console.log(''Write failed: '' + e.toString());
      };

      // Create a new Blob and write it to log.txt.
      var blob = new Blob([''Lorem Ipsum''], {type: ''text/plain''});

      fileWriter.write(blob);

    }, errorHandler);

  }, errorHandler);

}

window.requestFileSystem(window.TEMPORARY, 1024*1024, writeFile, errorHandler);

function readFile(fs) {

  fs.root.getFile(''log.txt'', {}, function(fileEntry) {

    // Get a File object representing the file,
    // then use FileReader to read its contents.
    fileEntry.file(function(file) {
       var reader = new FileReader();

       reader.onloadend = function(e) {
         console.log(e.target.result)
       };

       reader.readAsText(file);
    }, errorHandler);

  }, errorHandler);

}

plnkr http://plnkr.co/edit/EVVNYYUvHiM545T06kMC?p=preview

Tenga en cuenta que en Chrome 38+ también es posible crear un objeto File usando el new File() constructor new File() ; ver Chrome: ¿Crear entrada de archivo desde blob con Javascript? .

No, es un proceso en segundo plano, guardar los datos en el archivo existe en la carpeta.

Este enfoque tampoco escribirá automáticamente el archivo creado en una carpeta existente en el sistema de archivos del usuario.

Con cualquiera de los dos enfoques, la acción del usuario debería ser necesaria para guardar el archivo en el sistema de archivos del usuario. Esto se puede lograr usando el atributo de download en a elemento, data URI ¿Cómo exportar información de matriz de JavaScript a csv (en el lado del cliente)? , o un elemento iframe Descargar archivo usando Javascript / jQuery ; que debería solicitar al usuario que seleccione guardar el archivo o no guardar el archivo.

Consulte también La interfaz de FileSaver.js , FileSaver.js