Phát hiện thư mục kéo và thả HTML5 trong firefox. Thậm chí có thể không?

Question

Tôi biết rằng vấn đề này có thể trùng lặp nhưng vì không có giải pháp nào có thể giúp tôi, tôi đang đăng sự cố của riêng mình. Tôi có vùng thả nơi tôi muốn phát hiện xem mục đã kéo có phải là thư mục hoặc tệp hay không. Trong chrome tôi đạt được điều này bằng cách sử dụng

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

trong firefox nó không thể sử dụng giải pháp trên (webkit) và sau khi trải qua nhiều giờ cố gắng để giải quyết việc này tôi đã đưa ra các giải pháp sau (và thất bại)

1. Tôi kiểm tra xem mục đã kéo không có loại và không có kích thước như dưới đây và trong hầu hết các trường hợp, nó hoạt động như mong đợi. Từ những gì tôi đã đọc này là không hiệu quả và không thành công tất cả các lần như một số tập tin có thể không có phần mở rộng tập tin vì vậy tôi cố gắng đọc tập tin như chuỗi nhị phân (readAsBinaryString) hoặc readAsArrayBuffer với FileReader API và bắt ngoại lệ trong trường hợp mục là không thể đọc được nhưng ngoại lệ không bao giờ bị ném.

     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. Trong các giải pháp sau đây tôi đang cố gắng sử dụng mozGetDataAt là webkitGetAsEntry tương ứng (??? Không phải 100% về vấn đề này xin vui lòng chính xác cho tôi nếu tôi đã sai lầm) nhưng tôi đang nhận được một ngoại lệ an ninh.

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

Và ngoại trừ là:

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

Thực sự là có một cách để làm điều này trong firefox? Tôi không muốn dựa vào thư viện của bên thứ ba hoặc xử lý bên máy chủ nếu có thể. Bất kỳ đề xuất-ý kiến ​​sẽ được nhiều đánh giá cao.

Cảm ơn

M

Answer 1

Câu trả lời đơn giản cho câu hỏi của bạn là "Không" không có cách nào để đọc một thư mục bằng cách kéo-và-thả trong Firefox.

Có vẻ như không phải là tiêu chuẩn HTML5 để xử lý thư mục (chưa). Khả năng xử lý các thư mục của Chrome là thứ gì đó tùy chỉnh (ngoài tiêu chuẩn) mà chúng được tích hợp trong trình duyệt của họ.

Hiện tại không có cách nào để thực hiện kéo và thả thư mục trong Firefox (hoặc IE tôi tin) bằng cách sử dụng HTML5/Javascript. Có một "lỗi" trên tính năng này trên Mozilla's bugzilla và nó đề cập rằng W3C hiện đã ngừng tạo thông số chuẩn cho API hệ thống tệp bao gồm các thư mục (mặc dù có editor's draft) này. Lỗi Mozilla đó vẫn đang ở trạng thái MỚI và không xuất hiện được gán/được thực hiện.

Microsoft có this unofficial edge document về tính năng có thể thú vị nếu bạn cũng có câu hỏi về việc thử tính năng này trong IE.

Answer 2

này thì khả dĩ trong Firefox 42 trở lên (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/):

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

ví dụbằng cách sử dụng Drang'n'Drop sự kiện: e.dataTransfer.getFilesAndDirectories();

hoặc bằng cách sử dụng một hộp thoại đầu vào mới, cho phép người dùng lựa chọn giữa các tập tin hoặc thư mục tải lên:

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

liên quan Bugzillas:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 (Triển khai đề xuất của MS cho một tập hợp con giảm của API FileSystem mới)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 (Kéo và chọn thư mục tàu)

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 (Hỗ trợ lọc GetFilesAndDirectories mục ::)

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 (Phát hành trong Firefox 50, tháng 11 năm 2016)

Mã một phần từ: https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop (https://archive.is/ZBEdF)

Unfortunatelly không trong MS Edge cho đến thời điểm này: https://dev.modern.ie/platform/status/draganddropdirectories/

Answer 3

Đây là những gì tôi đã làm để giải quyết vấn đề này:

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

Về cơ bản:

• Nếu mục drag-and-drop có một loại kịch câm, sau đó nó là một file
• Nếu không, cố gắng đọc nội dung nhập
  • Chỉ đọc 5 byte đầu tiên (để tránh tải tệp lớn vào bộ nhớ do tai nạn): ent.slice(0, 5)
  • Nếu đọc thành công, sau đó nó là một file
  • Nếu đọc không, thì đây là một thư mục

Thưởng thức!