2010-03-04 10 views
30

He visto algunas publicaciones relacionadas con el acceso a archivos en una máquina cliente por una página web, concretamente esta question.HTML5 le permite interactuar con archivos de clientes locales desde un navegador

Estoy tratando de aprovechar el paradigma de "actualización continua en la nube" para algunos algoritmos que estoy escribiendo para que mis usuarios puedan acceder a las últimas versiones simplemente accediendo a la página web. Esto requiere que el programa/página web pueda comenzar con un directorio e inspeccionar los archivos dentro de él y calcular los resultados en función de lo que se encuentre. Al final también debe poder escribir el archivo de resultados en el sistema de archivos del cliente.

Una de las respuestas en la pregunta anterior menciona Google Gears, pero desde entonces se ha suspendido a favor de HTML5. ¿Es posible acceder a un directorio de clientes dentro de HTML5? ¿Cómo?

Sé por qué el acceso por cualquier página web a los archivos locales es un riesgo de seguridad, pero para mi propósito no tengo ningún problema para pedirle al usuario los permisos correspondientes.

+0

¿Cómo te va con este en el final? Estoy haciendo el mismo análisis en aplicaciones de navegador con acceso completo al sistema de archivos. Gracias – Dave

Respuesta

30

No, al menos no directamente. Sin embargo, tienes varias opciones aquí.

Actualmente sus mejores opciones son:

  • arrastrar y soltar archivos desde el escritorio, ver a tutorial.
  • Utilice el archivo de tipo de entrada.
    • Lea los contenidos con la API de archivo o envíe el formulario. Lea más en Mozilla Developer Center para leer el archivo dinámicamente.
    • Puede especificar el atributo multiple para leer y abrir varios archivos a la vez sin tener que tener campos separados.
    • Puede tener una entrada invisible y "activar un clic" para abrir el cuadro de diálogo Abrir archivo. Consulte el enlace anterior del Centro de desarrolladores de Mozilla para obtener más información.
  • Utilice FileSystem API que le permite crear, eliminar, leer, modificar archivos en el sistema de archivos. Nota: obtienes un directorio de espacio aislado para trabajar, no puedes acceder a todo el sistema simplemente así.
  • Utilice Java con signed applets para acceder a todo el sistema de archivos. Esto requiere que el usuario acepte la firma.
+0

Hola Kai, ¿sabes si tu afirmación anterior de que HTML 5 no permite el acceso completo al sistema de archivos sigue siendo cierta? Tratando de encontrar una buena solución para el acceso al sistema de archivos del navegador o fuera del navegador. Idealmente, la solución sería usar tecnologías de desarrollo web como HTML 5/Silverlight/Adobe Air. Gracias, Dave – Dave

+1

@Dave: a partir de ahora (10 de febrero de 2011) y en el futuro previsible, HTML5 no proporcionará acceso de lectura/escritura directamente al sistema de archivos del usuario.Hay algo específico e implementado en Chrome (http://dev.w3.org/2009/dap/file-system/pub/FileSystem/), pero solo le permite ejecutar acciones en un directorio de espacio aislado sin acceso a los archivos externos. Creo que Java tiene el poder más grande que le permite escribir/leer prácticamente cualquier archivo en el sistema si primero firma el applet. El usuario obviamente se le pedirá que confíe en la firma. – Tower

+0

En abril de 2014, se anunció en public-webapps que la especificación API de Filesystem no está siendo considerada por otros navegadores. Por ahora, la API es específica de Chrome y es poco probable que otros navegadores la implementen y ya no se estandariza con el W3C. src: http://www.html5rocks.com/en/tutorials/file/filesystem/ –

2

Chrome 6 también será compatible con la API de archivos

0

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

Hay varias cosas que pertenecen al sistema de archivos y las API FileWriter que se debe tener en cuenta, algunos de los cuales fueron mencionados, pero vale la pena repetir

:

  • Las implementaciones de las API actualmente sólo existen en cromo basados ​​en los navegadores (Chrome & Opera)
  • Tanto de las API fueron llevados fuera de los estándares del W3C el 24 de abril de 2014, ya partir de ahora son propiedad de
  • la eliminación de las APIs (ahora propiedad) de los navegadores de aplicación en el futuro es una posibilidad
  • Un caja de arena (una ubicación en el disco fuera de la cual los archivos se pueden producir ningún efecto) se utiliza para almacenar los archivos creados con la API de
  • Un sistema de archivos virtual (una estructura de directorios que no necesariamente existe en el disco de la misma forma que lo hace cuando se accede desde el navegador) se utiliza representar los archivos creados con la API de

Éstos son ejemplos sencillos de cómo se utilizan las API, directa e indirectamente, de forma conjunta para hacer estas cosas :

BakedGoods *

Escribir archivo: archivo

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

Leer:

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

Uso del archivo crudo, FileWriter, y las API de 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); 

Teniendo en cuenta los estados actuales del sistema de archivos y APIs FileWriter, su utilización para leer y escribir archivos actualmente no constituye una "forma de HTML5" de hacer las cosas.

Sin embargo, el renovado interés en las API por parte de los proveedores de navegadores que no implementan puede colocarlos de nuevo en la ruta de estándares. Eso, combinado con la alta penetración en el mercado de los navegadores basados ​​en Chromium y el hecho de que Google (el principal contribuyente a Chromium) no ha dado y la fecha de finalización de la vida de las API debería ser suficiente para justificar su uso en algunos casos.

Bakedgoods * se mantiene por nada menos que este individuo aquí :)

Cuestiones relacionadas