FileSystem -- 文件夹拖动上传

Freeman 发布于2019-08-21 12:28 / 432人阅读

摘要：回调函数回调函数文件夹拖动拦截默认行为，并阻止冒泡文件夹拖动或者文件拖动，浏览器默认会直接打开显示，图片尤为明显，所以首先需要阻止默认行为。

前言

文件拖动上传，对于个别应用场景十分有效，实现起来也并不难。参见
“浏览器图片预览 --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 文件夹上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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