【问题标题】:Is it possible to drag+drop a file from the browser to the desktop, causing a download?是否可以将文件从浏览器拖放到桌面,从而导致下载?
【发布时间】:2011-03-23 20:53:25
【问题描述】:

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

【问题讨论】:

  • 如果可能的话,我想您将不得不编写一个浏览器扩展程序。
  • 其实用 Chrome 是可以的:thecssninja.com/javascript/gmail-dragout
  • @raymi 链接被我破坏了。你能提供一个新的链接吗?

标签: javascript jquery drag-and-drop


【解决方案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。

【讨论】:

  • 在 Chrome 和 Opera 中运行良好。在 Firefox 中不起作用。
【解决方案2】:

仅谷歌浏览器支持。
http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-desktop-dnd-out 例如,它在 Gmail 中实现。

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

【讨论】:

【解决方案3】:

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

【讨论】:

  • 跟进问题 - 你会建议一个浏览器插件来实现这一点,这意味着我必须为每个浏览器或某种类型的桌面集成创建一个插件?
  • 老实说,我不建议尝试。这是非标准行为,除非你给他们指示,否则没有人会尝试它。是的,您需要在每个浏览器中使用不同的插件。
  • False - (现在)可以这样做。 Chrome 有一个方法(见下面的答案),似乎 Firefox 需要扩展(superuser.com/questions/758797/…
  • @Abacus -- 这个问题四岁半。任何看到这一点的人都应该意识到技术是不断变化的,而这个古老的答案几乎没有价值。请不要添加随机噪音,更不用说仅仅因为它已经过时而拒绝投票了......嘘
猜你喜欢
  • 2011-07-21
  • 2011-10-10
  • 1970-01-01
  • 1970-01-01
  • 2019-10-10
  • 2015-06-03
  • 2013-02-13
  • 1970-01-01
  • 2014-05-31
相关资源
最近更新 更多