是否可以将文件从浏览器拖放到桌面,导致下载?

时间:2011-03-23 20:53:26

标签: php javascript jquery drag-and-drop

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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上用于链接时,&#34;静态下载&#34;没有用,&#34; Url Download&#34; Google Chrome崩溃了。

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