HardBirch

Chrome新特性:文件夹拖拽支持

时间:12-08-22 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:1 点击: 2,312 次

        现代浏览器支持拖放本地文件到浏览器上,应用可以进行文件的编辑、上传等操作,但是之前并不支持文件夹拖放。但是从最新的Chrome 21开发版开始,这个功能已经得到了支持。

        文件拖放

        之前文件拖放的代码如下:

<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length =e.dataTransfer.files.length;
  for (var i = 0; i < length;i++) {
    var file =e.dataTransfer.files[i];
    ... // do whatever you want
  }
};

        通过这段代码,我们可以从本地拖放一个或者多个文件到浏览器里。但是当我们拖拽的是文件夹时,操作会被拒绝或者被当成文件处理而导致失败。

        文件夹拖放

        Chrome21允许我们从文件系统拖放一个或者多个文件夹到浏览器窗口上,你只需要对处理放置对象的方式进行一些调整。

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

        请注意这里有一个最大的不同是我们可以把放置的对象用新的Javascript API - getAsEntry来处理,最后得到一个Entry对象(FileEntry或者DirectoryEntry)。

        拿到Entry对象的访问权限后,你可以通过FileSystem API规范里标准的文件处理方法进行处理(例如.isFile或者.isDirectory属性)。

        如果要了解FileSystemAPI的更多信息, HTML5rocks上有一篇《FileSystem API历险》。至于拖放特性,可以看看这篇文章

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: Chrome新特性:文件夹拖拽支持

Chrome新特性:文件夹拖拽支持:目前有1 条留言

  1. 沙发
    niceguy01:

    gmail 早就有了

    2012-08-23 16:10 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐