我有一个应用程序可以存储文件并使用拖放来上传它们。有没有一种方法可以拖放以将文件下载到我的 table 面,而不必单击“下载”。基本上,与拖放上传相反。
最佳答案
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 上以获得链接时,“静态下载”不起作用,并且“Url 下载”使 Google Chrome 崩溃。
与大多数拖放操作一样,它不适用于 MSIE 9,我没有尝试过 10+ 或 Firefox。
关于javascript - 是否可以将文件从浏览器拖放到桌面,从而导致下载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5411481/