Filesystem API - Загрузить с локального диска к локальной файловой системе

Question

Ive много читал о файловой системе API и HTML5, но я просто не мог найти рабочее решение, поэтому я прошу вас, ребята:

Я хочу иметь файл загружать форму, перетаскивать перетаскивание или регулярное поле ввода не имеет значения, однако я хочу выбрать файл, и после его загрузки он должен взять файл или целую папку и «загрузить» его в файловую систему, расположенную на клиентском компьютере. Загрузка находится в скобках, потому что я действительно хочу скопировать файл/папку в локальную файловую систему клиентов.

Возможно ли это? Потому что я хочу сделать приложение, где пользователь может загружать свои файлы, такие как музыка или большие видео и фильмы, в свою локальную файловую систему и редактировать/смотреть и т. Д. В моем приложении. Я знаю, что я должен загрузить эти большие файлы я должен разрезать их на куски и загрузить их сложены, но я просто хочу, чтобы начать немного :)

Заранее спасибо

Answer 1

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

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

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

Answer 2

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

• Использование атрибута webkitdirectory на <input type="file">.
  • Это позволяет пользователю выбирать каталог с помощью соответствующего диалогового окна.
• Использование API файловой системы.
  • Речь идет о изолированной файловой системе, которая позволяет хранить файлы на компьютере клиента.
• Использование API файлов.
  • Это API, который позволяет вам читать файлы. Файлы доступны через элемент <input type="file"> посредством переноса с использованием перетаскивания или через 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); 
});