read - manejo de archivos en javascript

API del sistema de archivos: carga desde la unidad local al sistema de archivos local

Question

He leído mucho sobre la API del sistema de archivos y HTML5, pero simplemente no pude encontrar una solución de trabajo, así que les pregunto a ustedes:

Quiero tener un formulario de carga de archivo, arrastrar o soltar el cuadro de entrada regular no importa, sin embargo, quiero seleccionar un archivo, y después de cargarlo debe tomar el archivo o una carpeta completa y "cargarlo" al sistema de archivos ubicado en los clientes computadora. La carga está entre corchetes porque realmente quiero copiar el archivo / carpeta al sistema de archivos local del cliente.

¿Es posible? Porque quiero hacer una aplicación, donde un usuario puede cargar sus archivos, como música o videos y películas de gran tamaño, a su sistema de archivos local y editarlos, verlos en mi aplicación. Sé que tengo que subir esos grandes archivos que tengo que cortarlos en pedazos y cargarlos apilados, pero solo quiero empezar poco :)

Gracias por adelantado

Answer 1

De hecho, hay poca información sobre este tema en este momento, así que armé un ejemplo que combina:

• Usando el atributo webkitdirectory en <input type="file"> .
  • Esto permite al usuario seleccionar un directorio usando un cuadro de diálogo apropiado.
• Usando la API del sistema de archivos.
  • Se trata del sistema de archivos de espacio aislado que le permite almacenar archivos en la máquina del cliente.
• Usando la API de archivo.
  • Esta es la API que le permite leer archivos. Los archivos son accesibles a través de un elemento <input type="file"> , a través de una transferencia usando arrastrar y soltar, o a través de la API del sistema de archivos.

Como actualmente solo funcionan bien en Chrome, utilicé el prefijo de webkit cuando era necesario.

http://jsfiddle.net/zLna6/3/

El código en sí tiene comentarios que espero sean claros:

var fs,
    err = function(e) {
        throw e;
    };

// request the sandboxed filesystem
webkitRequestFileSystem(
    window.TEMPORARY,
    5 * 1024 * 1024,
    function(_fs) {
        fs = _fs;
    },
    err
);

// when a directory is selected
$(":file").on("change", function() {
    $("ul").empty();

    // the selected files
    var files = this.files;
    if(!files) return;

    // this function copies the file into the sandboxed filesystem
    function save(i) {
        var file = files[i];

        var text = file ? file.name : "Done!";

        // show the filename in the list
        $("<li>").text(text).appendTo("ul");

        if(!file) return;

        // create a sandboxed file
        fs.root.getFile(
            file.name,
            { create: true },
            function(fileEntry) {
                // create a writer that can put data in the file
                fileEntry.createWriter(function(writer) {
                    writer.onwriteend = function() {
                        // when done, continue to the next file
                        save(i + 1);
                    };
                    writer.onerror = err;

                    // this will read the contents of the current file
                    var fr = new FileReader;
                    fr.onloadend = function() {
                        // create a blob as that''s what the
                        // file writer wants
                        var builder = new WebKitBlobBuilder;
                        builder.append(fr.result);
                        writer.write(builder.getBlob());
                    };
                    fr.onerror = err;
                    fr.readAsArrayBuffer(file);
                }, err);
            }, 
            err
        );
    }

    save(0);
});

$("ul").on("click", "li:not(:last)", function() {
    // get the entry with this filename from the sandboxed filesystem
    fs.root.getFile($(this).text(), {}, function(fileEntry) {
        // get the file from the entry
        fileEntry.file(function(file) {
            // this will read the contents of the sandboxed file
            var fr = new FileReader;
            fr.onloadend = function() {
                // log part of it
                console.log(fr.result.slice(0, 100));
            };
            fr.readAsBinaryString(file);
        });
    }, err);
});

Answer 2

Eso no es posible, exactamente, pero tu aplicación todavía puede funcionar. Leer el archivo es posible a través de un elemento de formulario de entrada de archivo , pero volver a escribir el archivo en el disco provocará problemas.

Las dos formas en que su navegador puede escribir en el disco son 1) descargar un archivo y 2) la API del sistema de archivos HTML5 . La opción n. ° 1 obviamente no permite que su aplicación elija el destino, y la opción n. ° 2 solo funciona con los sistemas de archivos sandbox creados por el navegador. Esa restricción puede no ser un factor decisivo para usted, solo significa que las carpetas que utiliza su aplicación estarán ocultas en algún lugar de los archivos de datos de su navegador.

Además, la API del sistema de archivos es actualmente solo de Chrome (pero es un estándar abierto). Si quieres soporte multiplataforma, tal vez puedas usar IndexedDB . Puede usar localStorage, pero Chrome tiene un límite de 5 MB, lo que sería terrible para una aplicación de medios.