API файловой системы — загрузка с локального диска в локальную файловую систему

На данный момент действительно мало информации по этому вопросу, поэтому я собрал пример, который сочетает в себе:

• Using the webkitdirectory attribute on <input type="file">.
  • This allows the user to select a directory using an appropriate dialog box.
• Using the Filesystem API.
  • This is about the sandboxed filesystem which allows you to store files on the client's machine.
• Using the File API.
  • This is the API that allows you to read files. The files are accessible through an <input type="file"> element, through a transfer using drag and drop, or through the Filesystem API.

Поскольку в настоящее время они хорошо работают только в Chrome, я использовал префикс webkit, где это необходимо.

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

В самом коде есть комментарии, которые, я надеюсь, понятны:

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

Это точно невозможно, но ваше приложение, вероятно, все еще может работать. Чтение файла возможно через элемент формы file input, но запись файла вернуться к диску, где вы столкнетесь с проблемами.

Ваш браузер может записывать на диск двумя способами: 1) загрузить файл и 2) HTML5. API файловой системы. Вариант № 1, очевидно, не позволяет вашему приложению выбирать место назначения, а вариант № 2 работает только с файловыми системами песочницы, созданными браузером. Это ограничение не может быть для вас решающим — оно просто означает, что папки, которые использует ваше приложение, будут скрыты где-то в файлах данных вашего браузера.

Кроме того, API файловой системы в настоящее время доступен только для Chrome (но это открытый стандарт). Если вам нужна межплатформенная поддержка, вы можете использовать IndexedDB. Вы можете использовать localStorage, но Chrome имеет жесткое ограничение в 5 МБ, что было бы ужасно для мультимедийного приложения.