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

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? } 

例外是：

http：// localhost：8080的權限被拒絕為UnnamedClass類的對象創建包裝器

實際上有一種方法可以在Firefox中執行此操作嗎？ 如果可能，我不想依賴第三方庫或服務器端處理。 任何建議 - 評論將不勝感激。

Answer 1

有可能在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的新文件系統API縮減子集的提議）

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 （船舶目錄揀選和目錄拖放）

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

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

代碼部分來自： 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 2

您的問題的簡單答案是“否”，在Firefox中無法使用拖放功能讀取文件夾。

似乎沒有用於處理文件夾的HTML5標准（尚未）。 Chrome處理文件夾的能力是他們在瀏覽器中內置的（標准之外）。

目前沒有辦法使用HTML5 / Javascript在Firefox（或我相信的IE）中進行文件夾拖放。 Mozilla的bugzilla上有一個關於此功能的“bug”，它提到W3C目前已經停止為覆蓋目錄的文件系統API創建標准規范（盡管有這個編輯器的草案 ）。 該Mozilla錯誤仍處於NEW狀態，並且不會顯示已分配/已獲取。

微軟有關於該功能的非正式邊緣文檔 ，如果您對在IE中嘗試此問題也有疑問，可能會感興趣。

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 )
  • 如果讀取成功，則它是一個文件
  • 如果讀取失敗，那么這是一個目錄

請享用！