引子

Drag和Drop是众多HTML5的令人兴奋的功能之一，它支持主流的现代浏览器，甚至是最新版本的IE哦！赞一个！

最近Google放出了一个新的功能，可以从浏览器拖动文件到指定的文件夹里，没错，你没有听错，是任意一个你想拖动到的文件夹。听到这里是不是已经让各位极客们很兴奋了呢？！

最初是L兄告诉我Gmail附件有这个功能，试了一下果然很神奇，居然真的可以把文件从网页里面拖到任何一个操作系统中的文件夹中，完成下载过程。

查了很多很多资料，最终也找到了实现的方法，这里分享一下我所知道的一切。

---

实现

实现这个功能目前我们只需要以下几样东西：

• Chrome
• dragstart事件支持
• 下载文件路径，下载的文件类型，下载的文件名

相信这几样东西应该不是很难弄取到吧~

接下来我们就要开工了：

---

1. 首先我们需要判断浏览器是否支持拖动事件。

属性映射经常用来测试浏览器对HTML5 API属性的支持情况。比如，通过寻找draggable属性，检查带有[draggable="true"]的元素支持** Drag and Drop API**：

    "draggable" in document.createElement("div");

     //截至写这篇文章的时候还是只有chrome支持该功能
    /chrome/.test( navigator.userAgent.toLowerCase() );
`

如果一切顺利，那么恭喜你可以进入接下来的游戏环节了

2.拼装地址

拖动下载对文件地址的要求比较高，必须是如下格式的才能进行拖拽下载：

{MiME}:{FileName}:{FileUrl}

如：

image/jpeg:Penguins.jpg:https://www.box.net/box_download_file?file_id=f66690

经过实践，只有以上3个参数都正常的时候，该功能才能正常运行。

3.“安装”事件

以上的工作完成之后，接下来就是绑定事件了。

var url='image/jpeg:Penguins.jpg:https://www.box.net/box_download_file?file_id=f66690';

document.body.addEventListener("dragstart",function(e) {
    e.dataTransfer.setData("DownloadURL",  url);
});

好了，万事俱备只欠东风，现在回到你的浏览器，尽情的拖动图片文本等一切可以拖动的元素吧，把它拖到，文件夹中，是不是可以看到一个名为Penguins.jpg的文件已经安详的躺在了你拖动的文件夹里面了？哈哈 是不是很神奇

---

废话

好啦功能实现了，不得不多巴拉巴拉几句，个人认为这虽然是个很好的用户体验，但是很有可能成为鸡肋功能。 1.浏览器兼容性，截至目前只有Chrome浏览器支持，不过对于谷歌来说，推广开来形成影响力不是问题。 2.安全性，理论上用户拖拽下来的文件可以来着任何域，然后文件名、文件类型js都可以随意修改，如果别有用心的人，在网页中加入了一个恶意的js，替换拖拽的路径，把恶意文件伪装成和你要下载的文件是同一个文件名的文件，会怎样？

---

还是废话

你可能想继续了解： HTML5 File api 实现断点续传