是否可以将文件从浏览器拖放到桌面，从而进行下载？

Question

我有一个应用程序可以存储文件并使用拖放来上传它们。有没有办法可以将文件拖放到桌面上，而不必单击“下载”。基本上，与拖放上传相反。

Answer 1

html5rocks 和 cssninja 都可以，但我认为对于快速回答来说有点过分了。这是一个使用拖动事件的简单示例，包括下载文件。

<style>
div { background-color: #eee; border: 1px solid black; padding: 5px; float: left; clear: both; }
</style>
<div id="uiLinkText"           draggable="true">Drag <b>Text</b> to a text editor </div>
<div id="uiLinkHyperlink"      draggable="true">Drag <b>Hyperlink</b> to address bar </div>
<div id="uiLinkUrlDownload"    draggable="true">Drag <b>Url Download</b> to file system </div>
<div id="uiLinkStaticDownload" draggable="true">Drag <b>Static Download</b> to file system </div>
<script>
document.getElementById('uiLinkText').ondragstart = function(event){
  // plain text, for dropping into text editor
  event.dataTransfer.setData('text/plain', 'Go to http://stackoverflow.com/questions/5411481/ to read about this.');
}
document.getElementById('uiLinkHyperlink').ondragstart = function(event){
  // URL, for dropping into the browser's address bar
  event.dataTransfer.setData('text/uri-list', 'http://stackoverflow.com/questions/5411481/');
}
document.getElementById('uiLinkUrlDownload').ondragstart = function(event){
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:SourceQuestion.html:http://stackoverflow.com/questions/5411481/')
}
document.getElementById('uiLinkStaticDownload').ondragstart = function(event){
  var textToWrite = 'file contents here';
  var textFileAsBlob = new Blob([textToWrite], { type: 'text/xml' });
  var url = window.URL.createObjectURL(textFileAsBlob);
  // file download contents, for dropping into a file system
  event.dataTransfer.setData('DownloadURL', 'text/plain:Static.txt:' + url)
}
</script>

警告：虽然这在本地 Chrome 中（在 Windows 7 中）对我来说效果很好，但当我尝试将其放在 jsfiddle 上进行链接时，“静态下载”不起作用，并且“网址下载”使 Google Chrome 崩溃。

与大多数拖放操作一样，它不适用于 MSIE 9，我还没有尝试过 10+ 或 Firefox。

Answer 2

仅在 Google Chrome 中受支持。
http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-desktop-dnd-out 例如它在 Gmail 中实现。

任何其他浏览器都不支持此行为。

Answer 3

不，您需要能够设置下载路径，如果没有其他的话，没有浏览器允许您这样做。可以使用插件，但不能直接使用 JS。

Answer 4

请参阅此处更新的链接https://ryanseddon.com/javascript/gmail-upload/来自@raymi