成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

FileSystem -- 文件夾拖動(dòng)上傳

Freeman / 458人閱讀

摘要：回調(diào)函數(shù)回調(diào)函數(shù)文件夾拖動(dòng)攔截默認(rèn)行為，并阻止冒泡文件夾拖動(dòng)或者文件拖動(dòng)，瀏覽器默認(rèn)會(huì)直接打開(kāi)顯示，圖片尤為明顯，所以首先需要阻止默認(rèn)行為。

前言

文件拖動(dòng)上傳，對(duì)于個(gè)別應(yīng)用場(chǎng)景十分有效，實(shí)現(xiàn)起來(lái)也并不難。參見(jiàn)
“瀏覽器圖片預(yù)覽 --http://blog.segmentfault.com/bornkiller/1190000000428572"。
現(xiàn)在更進(jìn)一步，做到文件夾拖動(dòng)。Filsesystem不是w3c標(biāo)準(zhǔn)，所以chrome瀏覽器支持度良好，其它瀏覽器大部分不支持。以下內(nèi)容全基于chrome 36 版本測(cè)試成功。

參考資料

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

  創(chuàng)建和寫(xiě)入：BlobBuilder、FileWriter

  目錄和文件系統(tǒng)訪問(wèn)：DirectoryReader、FileEntry/DirectoryEntry
啟用文件存儲(chǔ)系統(tǒng)

做文件處理，需要向?yàn)g覽器申請(qǐng)空間。需要注意的是，此處申請(qǐng)的空間不可與硬盤(pán)上文件直接交互，在存儲(chǔ)上，與cookie較為相似，存儲(chǔ)在硬盤(pán)上，但不能與硬盤(pán)進(jìn)行文件交換。

var requestFileSystem = window.requestFileSystem ?
               window.requestFileSystem:
               window.webkitRequestFileSystem;
// success 回調(diào)函數(shù)
var onInitFS = function(fs) {};
// error 回調(diào)函數(shù)
var onInitFE = function(fe) {};
requestFileSystem(window.TEMPORARY, 10*1024*1024, onInitFS, onInitError);
文件夾拖動(dòng) 攔截默認(rèn)行為，并阻止冒泡

文件夾拖動(dòng)或者文件拖動(dòng)，瀏覽器默認(rèn)會(huì)直接打開(kāi)顯示，圖片尤為明顯，所以首先需要阻止默認(rèn)行為。

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;
  // 多文件/文件夾拖動(dòng)時(shí)，items.length即為拖入文件/文件夾數(shù)量
  var itemsCount = items.length;
  // 獲取文件/文件夾Entry對(duì)象
  var entries = [];      
  for (var i=0; i

處理FileEntry/DirectoryEntry


//每個(gè)Entry對(duì)象具備isDirectory, isFile屬性，判定目標(biāo)為文件或是文件夾。具體接口可以自行查閱



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()方法


如果不確定，只能采取目錄遍歷.由于目錄遍歷為異步操作，所以需要將目錄內(nèi)容處理回調(diào)函數(shù)作為傳入?yún)?shù)。



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

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

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





如果引入了Q模塊，可以通過(guò)promise/defer方式來(lái)實(shí)現(xiàn)。



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

// 返回值為promise，傳遞值為目錄下所有的entry對(duì)象組成的數(shù)組。
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 轉(zhuǎn)換 File 及文件操作


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



交流


QQ : 491229492

注明交流即可

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87617.html

相關(guān)文章

  • HADOOP集群文件上傳下載

    摘要：對(duì)上的文件進(jìn)行上傳和下載是對(duì)集群的基本操作，在權(quán)威指南一書(shū)中，對(duì)文件的上傳和下載都有代碼的實(shí)例，但是對(duì)如何配置客戶端卻是沒(méi)有講得很清楚，經(jīng)過(guò)長(zhǎng)時(shí)間的搜索和調(diào)試，總結(jié)了一下，如何配置使用集群的方法，以及自己測(cè)試可用的對(duì)集群上的文件進(jìn)行操作的程 對(duì)HDFS上的文件進(jìn)行上傳和下載是對(duì)集群的基本操作，在《HADOOP權(quán)威指南》一書(shū)中，對(duì)文件的上傳和下載都有代碼的實(shí)例，但是對(duì)如何配置HADOOP...

    nevermind 評(píng)論0 收藏0

  • 拖拽上傳功能的實(shí)現(xiàn)及原理

    摘要：場(chǎng)景最近，小明遇到這樣一種情況在網(wǎng)頁(yè)中上傳文件時(shí)偶爾頁(yè)面會(huì)崩潰。小明仔細(xì)測(cè)試了這種情況，發(fā)現(xiàn)之前用的一個(gè)文件上傳組件有一點(diǎn)缺陷，于是，小明決定自己手寫(xiě)一個(gè)，樣式如下圖一是沒(méi)有上傳文件時(shí)的樣式，圖二為上傳文件后的樣式。 場(chǎng)景 最近，小明遇到這樣一種情況：在網(wǎng)頁(yè)中上傳文件時(shí)偶爾頁(yè)面會(huì)崩潰。小明仔細(xì)測(cè)試了這種情況，發(fā)現(xiàn)之前用的一個(gè)文件上傳組件有一點(diǎn)缺陷，于是，小明決定自己手寫(xiě)一個(gè)，樣式如下：...

    beanlam 評(píng)論0 收藏0

  • 上傳圖片實(shí)時(shí)預(yù)覽

    摘要：引入當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽對(duì)象對(duì)象允許應(yīng)用程序異步讀取用戶計(jì)算機(jī)上的文件。 引入 當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽？ FileReader 對(duì)象 FileReader對(duì)象允許Web應(yīng)用程序異步讀取用戶計(jì)算機(jī)上的文件。使用new創(chuàng)建一個(gè)FileReader實(shí)例對(duì)象： let fileReader = new FileRea...

    sourcenode 評(píng)論0 收藏0

  • 上傳圖片實(shí)時(shí)預(yù)覽

    摘要：引入當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽對(duì)象對(duì)象允許應(yīng)用程序異步讀取用戶計(jì)算機(jī)上的文件。 引入 當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽？ FileReader 對(duì)象 FileReader對(duì)象允許Web應(yīng)用程序異步讀取用戶計(jì)算機(jī)上的文件。使用new創(chuàng)建一個(gè)FileReader實(shí)例對(duì)象： let fileReader = new FileRea...

    happyfish 評(píng)論0 收藏0

  • laravel-admin 文件上傳OSS

    摘要：前言因?yàn)轫?xiàng)目需求，需要把圖片上傳至阿里云，我的接口和后臺(tái)項(xiàng)目是分開(kāi)的，都使用的框架開(kāi)發(fā)，接入這里就不做討論了，這里主要說(shuō)一下上傳阿里的問(wèn)題。 前言 因?yàn)轫?xiàng)目需求，需要把圖片上傳至阿里云 OSS，我的 Api 接口和后臺(tái)項(xiàng)目是分開(kāi)的，都使用的 laravel 框架開(kāi)發(fā)，Api 接入 OSS 這里就不做討論了，這里主要說(shuō)一下 laravel-admin 上傳阿里 OSS 的問(wèn)題。 網(wǎng)上的一...

    darkbaby123 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Freeman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<