如何从文件夹中读取文件 [英] How to read files from folder

查看:145
本文介绍了如何从文件夹中读取文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

发现这篇文章介绍了如何区分文件上传和目录如何处理丢弃的文件夹但它们没有解释我如何处理目录上传。难以找到任何例子。任何人都知道如何获取目录中每个文件的 File 实例?

Found this article which showing how to distinguish file upload from directory How to handle dropped folders but they not explain how I can handle the directory upload. Having difficulties to find any example. Anyone know how to get File instance of each file in directory?

从该文章复制:

<div id="dropzone"></div>


var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};


推荐答案

使用 DirectoryReader directoryEntry.createReader() readEntries() 对于文件夹或 FileEntry file( ) 单个或多个文件丢弃。

Use DirectoryReader directoryEntry.createReader() , readEntries() for folders or , FileEntry file() for single or multiple file drops.

html

<div id="dropzone" 
     ondragenter="event.stopPropagation(); event.preventDefault();" 
     ondragover="event.stopPropagation(); event.preventDefault();" 
     ondrop="event.stopPropagation(); event.preventDefault(); handleDrop(event);">
    Drop files
</div>

javascript

javascript

function handleFiles(file) {
  console.log(file);
  // do stuff with `File` having `type` including `image`
  if (/image/.test(file.type)) {
    var img = new Image;
    img.onload = function() {
      var figure = document.createElement("figure");
      var figcaption = document.createElement("figcaption");
      figcaption.innerHTML = file.name;
      figure.appendChild(figcaption);
      figure.appendChild(this);
      document.body.appendChild(figure);
      URL.revokeObjectURL(url);
    }
    var url = URL.createObjectURL(file);
    img.src = url;
  } else {
    console.log(file.type)
  }
}

function handleDrop(event) {
  var dt = event.dataTransfer;
  var files = dt.files;
  var length = event.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = dt.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      // do whatever you want
      console.log("isFile", entry.isFile);
      entry.file(handleFiles);
    } else if (entry.isDirectory) {
      // do whatever you want
      console.log("isDirectory", entry.isDirectory);
      var reader = entry.createReader();
      reader.readEntries(function(entries) {
        entries.forEach(function(dir, key) {
          dir.file(handleFiles);
        })
      })
    }
  }
}

plnkr http://plnkr.co/edit/eGAnbA?p=preview

这篇关于如何从文件夹中读取文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆