FileSystem -- 文件夾拖動上傳

Freeman 發布于2019-08-21 12:28 / 453人閱讀

摘要：回調函數回調函數文件夾拖動攔截默認行為，并阻止冒泡文件夾拖動或者文件拖動，瀏覽器默認會直接打開顯示，圖片尤為明顯，所以首先需要阻止默認行為。

前言

文件拖動上傳，對于個別應用場景十分有效，實現起來也并不難。參見
“瀏覽器圖片預覽 --http://blog.segmentfault.com/bornkiller/1190000000428572"。
現在更進一步，做到文件夾拖動。Filsesystem不是w3c標準，所以chrome瀏覽器支持度良好，其它瀏覽器大部分不支持。以下內容全基于chrome 36 版本測試成功。

參考資料

探索FileSystem API -- http://www.html5rocks.com/zh/tutorials/file/filesystem/

DirectoryEntry -- https://developer.mozilla.org/en-US/docs/Web/API/DirectoryEntry

FileSystem API

API 被分為以下不同的主題：
讀取和處理文件：File/Blob、FileList、FileReader
創建和寫入：BlobBuilder、FileWriter
目錄和文件系統訪問：DirectoryReader、FileEntry/DirectoryEntry

啟用文件存儲系統

做文件處理，需要向瀏覽器申請空間。需要注意的是，此處申請的空間不可與硬盤上文件直接交互，在存儲上，與cookie較為相似，存儲在硬盤上，但不能與硬盤進行文件交換。

var requestFileSystem = window.requestFileSystem ?
               window.requestFileSystem:
               window.webkitRequestFileSystem;
// success 回調函數
var onInitFS = function(fs) {};
// error 回調函數
var onInitFE = function(fe) {};
requestFileSystem(window.TEMPORARY, 10*1024*1024, onInitFS, onInitError);

文件夾拖動 攔截默認行為，并阻止冒泡

文件夾拖動或者文件拖動，瀏覽器默認會直接打開顯示，圖片尤為明顯，所以首先需要阻止默認行為。

window.addEventListener("load", function(evt) {
  document.addEventListener("drop", prevent);
  document.addEventListener("dragenter", prevent);
  document.addEventListener("dragleave", prevent);
  document.addEventListener("dragover", prevent);       
});

function prevent(e){
  e.stopPropagation();
  e.preventDefault();
}

獲得FileEntry/DirectoryEntry

e.dataTransfer.items在firefox下為undefined，chrome下正常。

document.addEventListener("drop",entryResolve);
function entryResolve(e){
  var items = e.dataTransfer.items;
  // 多文件/文件夾拖動時，items.length即為拖入文件/文件夾數量
  var itemsCount = items.length;
  // 獲取文件/文件夾Entry對象
  var entries = [];      
  for (var i=0; i

處理FileEntry/DirectoryEntry

//每個Entry對象具備isDirectory, isFile屬性，判定目標為文件或是文件夾。具體接口可以自行查閱

entries.forEach(function(entry, key) {
   if(entry.isDirectory && !entry.isFile) {
       // entry is DirectoryEntry here
   }else if(!entry.isDirectory && entry.isFile) {
       // entry is FileEntry here
   }else{
      return false;
   }
})


文件夾遍歷


如果確定文件路徑，可使用getFile()方法
如果確定目錄路徑，可使用getDirectory()方法
如果遞歸刪除，可使用removeRecursively()方法
如果不確定，只能采取目錄遍歷.由于目錄遍歷為異步操作，所以需要將目錄內容處理回調函數作為傳入參數。

  function readDir(directoryEntry, readDirCallback) {
     // 判定參數類型是否匹配
     if (!directoryEntry.isDirectory || !typeof value === "function") {
        return false;
     }

     var fileEntriesContainer = [];
     // 創建目錄遍歷器 dirReader
     var dirReader = directoryEntry.createReader();

     // 遍歷目錄，由于無法一次性返回全部，所以需要遞歸調用，直到返回結果為空，執行回調函數。
     var readEntries = function() {
       dirReader.readEntries (function(results) {
         if (!results.length) {
           readDirCallback(fileEntriesContainer);
         } else {
           fileEntriesContainer = fileEntriesContainer.concat(toArray(results));
           readEntries();
         }
       }, errorHandler);
     };
     readEntries();
  }



如果引入了Q模塊，可以通過promise/defer方式來實現。

function readDirectoryEntry(directoryEntry) {
return  Q.Promise(function(resolve, reject) {
          if(directoryEntry.isDirectory) {
            resolve(true);
          } else {
            reject(false);
          }
        }).then(function() {
          return readDirectory(directoryEntry);
        })
};

// 返回值為promise，傳遞值為目錄下所有的entry對象組成的數組。
function readDirectory(directoryEntry) {
var defer = Q.defer();

var fileEntriesContainer = [];
var dirReader = directoryEntry.createReader();

// Call the reader.readEntries() until no more results are returned.
var readEntries = function() {
  dirReader.readEntries(function(results) {
    if (!results.length) {
      defer.resolve(fileEntriesContainer);
    } else {
      fileEntriesContainer = fileEntriesContainer.concat(toArray(results));
      readEntries();
    }
  }, function(err) {
    defer.reject(err.message);
  });
};
readEntries();  

return defer.promise;
}


FileEntry 轉換 File 及文件操作

// 通過file函數即可獲得File 對象
// File 對象處理請自行參閱 FileReader
entry.file(function(file){
   var fileReader = new FileReader();
   fileReader.readAsText(file);
   fileReader.addEventListener("load", function(){
      console.log(this.result);
   })
})


交流

QQ : 491229492

注明交流即可

GPU云服務器云服務器 java拖動文件上傳 java拖動文件夾 Filesystem 文件夾上傳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87617.html

HADOOP集群文件上傳下載

摘要：對上的文件進行上傳和下載是對集群的基本操作，在權威指南一書中，對文件的上傳和下載都有代碼的實例，但是對如何配置客戶端卻是沒有講得很清楚，經過長時間的搜索和調試，總結了一下，如何配置使用集群的方法，以及自己測試可用的對集群上的文件進行操作的程對HDFS上的文件進行上傳和下載是對集群的基本操作，在《HADOOP權威指南》一書中，對文件的上傳和下載都有代碼的實例，但是對如何配置HADOOP...

nevermind 2019-08-14 12:05 評論0 收藏0
拖拽上傳功能的實現及原理

摘要：場景最近，小明遇到這樣一種情況在網頁中上傳文件時偶爾頁面會崩潰。小明仔細測試了這種情況，發現之前用的一個文件上傳組件有一點缺陷，于是，小明決定自己手寫一個，樣式如下圖一是沒有上傳文件時的樣式，圖二為上傳文件后的樣式。場景最近，小明遇到這樣一種情況：在網頁中上傳文件時偶爾頁面會崩潰。小明仔細測試了這種情況，發現之前用的一個文件上傳組件有一點缺陷，于是，小明決定自己手寫一個，樣式如下：...

beanlam 2019-08-23 15:18 評論0 收藏0
上傳圖片實時預覽

摘要：引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽對象對象允許應用程序異步讀取用戶計算機上的文件。引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽？ FileReader 對象 FileReader對象允許Web應用程序異步讀取用戶計算機上的文件。使用new創建一個FileReader實例對象： let fileReader = new FileRea...

sourcenode 2019-08-22 16:00 評論0 收藏0
上傳圖片實時預覽

摘要：引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽對象對象允許應用程序異步讀取用戶計算機上的文件。引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽？ FileReader 對象 FileReader對象允許Web應用程序異步讀取用戶計算機上的文件。使用new創建一個FileReader實例對象： let fileReader = new FileRea...

happyfish 2019-08-02 10:06 評論0 收藏0
laravel-admin 文件上傳OSS

摘要：前言因為項目需求，需要把圖片上傳至阿里云，我的接口和后臺項目是分開的，都使用的框架開發，接入這里就不做討論了，這里主要說一下上傳阿里的問題。前言因為項目需求，需要把圖片上傳至阿里云 OSS，我的 Api 接口和后臺項目是分開的，都使用的 laravel 框架開發，Api 接入 OSS 這里就不做討論了，這里主要說一下 laravel-admin 上傳阿里 OSS 的問題。網上的一...

darkbaby123 2019-07-01 12:32 評論0 收藏0