HTML5在Firefox中拖放文件夾檢測。它甚至有可能嗎？

Question

我知道這個問題可能會重複，但因爲現有的解決方案都不能幫助我發佈我自己的問題。 我有一個拖放區域，我想檢測拖動的項目是文件夾還是文件。在Chrome中我使用

for (var i = 0; i < nrOfFiles; i++) { 
      var entry = e.originalEvent.dataTransfer.items[i].webkitGetAsEntry(); 
      if (entry.isDirectory) { 
       //folder detection 
     } 

在Firefox中是無法使用上述溶液（WebKit），因此花費很多時間試圖解決這個問題後實現這一點，我想出了以下解決方案（和失敗）

1. 我檢查拖動的項目是否沒有類型和大小如下，並在大多數情況下，它是按預期工作。從我讀過的這是不高效和不成功的，因爲有些文件可能沒有文件擴展名，所以我嘗試使用FileReader API將文件讀爲二進制字符串（readAsBinaryString）或readAsArrayBuffer，並在產品是不可讀，但從不拋出異常。

     var files = e.originalEvent.dataTransfer.files; 
         for (var i = 0; i < nrOfFiles; i++) { 
         if (files[i].size === 0 && files[i].type==="") { 
   
          try{ 
           var reader = new FileReader(); 
           reader.readAsBinaryString(files[i]); 
          }catch(e){ 
           //folder detection ? 
          } 
   
         }} 
   

2. 在下面的解決方案，我想使用mozGetDataAt作爲對應的webkitGetAsEntry（???不是100％，這個請糾正我，如果我錯了），但我得到一個安全異常。

     var entry = e.originalEvent.dataTransfer.mozGetDataAt("application/x-moz-file",i); 
         if (entry.isDirectory) { //not even reaching this statement. idk if isDirectory is applicable to entry 
          //folder detection? 
         } 
   

，異常是：

Permission denied for <http://localhost:8080> to create wrapper for object of class UnnamedClass 

實際上有沒有辦法在Firefox做到這一點？如果可能，我不想依賴第三方庫或服務器端處理。任何建議意見將不勝感激。

感謝

中號

Answer 1

簡單的回答你的問題是「否」，就沒有辦法使用在Firefox拖和下降來讀取一個文件夾。

似乎還沒有處理文件夾（尚）的HTML5標準。 Chrome處理文件夾的能力是他們內置到瀏覽器中的自定義內容（標準之外）。

目前沒有辦法使用HTML5/Javascript在Firefox（或IE相信）中進行文件夾拖放操作。 Mozilla's bugzilla上的這個特性有一個「bug」，它提到W3C目前已經停止爲覆蓋目錄的文件系統API創建一個標準規範（雖然有這個editor's draft）。該Mozilla的錯誤仍處於新的狀態，並沒有出現分配/採取。

微軟有this unofficial edge document的功能，這可能是有趣的，如果你也有關於在IE瀏覽器嘗試這個問題。

Answer 2

它在Firefox 42是可能的和向上（https://developer.mozilla.org/en-US/Firefox/Releases/42，https://nightly.mozilla.org/）：

https://jsfiddle.net/28g51fa8/3/

例如通過使用Drang'n'Drop事件：e.dataTransfer.getFilesAndDirectories();

，或者通過使用新的輸入對話框，讓用戶的文件或文件夾上傳之間進行選擇：

<input id="dirinput" multiple="" directory="" type="file" /> 
<script> 
var dirinput = document.getElementById("dirinput"); 
dirinput.addEventListener("change", function (e) { 
    if ('getFilesAndDirectories' in this) { 
    this.getFilesAndDirectories().then(function(filesAndDirs) { 
     for (var i=0, arrSize=filesAndDirs.length; i < arrSize; i++) { 
      iterateFilesAndDirs(filesAndDirs[i]); 
     } 
    }); 
    } 
}, false); 
</script> 

相關Bugzillas：

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310（實施MS針對新FileSystem API的縮減子集的建議）

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880（發貨目錄選取和目錄拖放）

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924（目錄:: GetFilesAndDirectories的支持過濾）

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21（在Firefox 50發行，2016年11月）

代碼部分地從： https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop（https://archive.is/ZBEdF）

可惜的是不在MS Edge目前爲止： https://dev.modern.ie/platform/status/draganddropdirectories/

Answer 3

這裏就是我做來解決這個問題：

var files = []; 

for(var i = 0; i < e.dataTransfer.files.length; i++){ 
    var ent = e.dataTransfer.files[i]; 
    if(ent.type) { 
     // has a mimetype, definitely a file 
     files.push(ent); 
    } else { 
     // no mimetype: might be an unknown file or a directory, check 
     try { 
      // attempt to access the first few bytes of the file, will throw an exception if a directory 
      new FileReader().readAsBinaryString(ent.slice(0, 5)); 
      // no exception, a file 
      files.push(ent); 
     } catch(e) { 
      // could not access contents, is a directory, skip 
     } 
    } 
} 

基本上是：

• 如果拖拽和拖放項具有MIME類型，那麼它是一個文件
• 否則，嘗試閱讀條目內容
  • 只讀取前5個字節（以避免意外地將大文件加載到內存中）：ent.slice(0, 5)
  • 如果讀取成功，那麼它是一個文件
  • 如果讀取失敗，那麼這是一個目錄

享受！