文件系統API - 從本地驅動器上傳到本地文件系統

Question

香港專業教育學院讀了很多關於文件系統API和HTML5，但我只是找不到工作的解決方案，所以我問你們：

我想有一個文件上傳表單，拖放或常規輸入框無關緊要，但是我想選擇一個文件，上傳後應該將文件或整個文件夾「上傳」到位於客戶端計算機上的文件系統。上傳在括號中，因爲我實際上想要將文件/文件夾複製到客戶端本地文件系統。

這有可能嗎？因爲我想製作應用程序，用戶可以將他的文件（如音樂或大視頻和電影）上傳到本地文件系統，並在應用程序中編輯/觀看等。我知道我必須上傳這些大文件我必須將它們切成塊並加載它們疊起來，但我只是想提前

Answer 1

那是不可能的，正是開始小:)

謝謝，但你的應用程序仍然可能工作。通過file input表單元素可以讀取文件，但將文件寫回到磁盤是您遇到問題的地方。

瀏覽器可以寫入磁盤的兩種方式是1）下載文件和2）HTML5 filesystem API。選項＃1顯然不會讓您的應用程序選擇目標，選項＃2僅適用於瀏覽器創建的沙箱文件系統。這個限制對你來說可能不是什麼大問題 - 它只是意味着你的應用使用的文件夾將被隱藏在瀏覽器數據文件的某個地方。

此外，Filesystem API目前僅支持Chrome瀏覽器（但它是一個開放標準）。如果你想跨平臺支持，也許你可以使用IndexedDB。您可以使用localStorage，但Chrome有5MB的限制，這對於媒體應用程序來說會很糟糕。

Answer 2

有確實在眼下這個問題的資料很少，所以我放在一起，結合了一個例子：

• 上<input type="file">使用webkitdirectory屬性。
  • 這允許用戶使用適當的對話框選擇一個目錄。
• 使用Filesystem API。
  • 這是關於沙盒文件系統，它允許您將文件存儲在客戶端的機器上。
• 使用File 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); 
});