支持 IE Javascript/Jquery/Html5 的拖放下载
[英]Drag Drop Download which supports IE Javascript/Jquery/Html5
问题描述
I tried the availabe drag drop download samples but the problem is it works perfectly fine in Chrome but when you try to drag drop a file onto the local machine with the intention of downloading using IE, it only downloads a shortcut link to the file.
我尝试了可用的拖放下载示例，但问题是它在 Chrome 中运行良好，但是当您尝试将文件拖放到本地计算机上并打算使用 IE 下载时，它只会下载文件的快捷链接。
Anyone have a solution to the problem ??有人有解决问题的方法吗？？ please share...请分享...
I tried to work with the code in the following link.我尝试使用以下链接中的代码。 http://www.thecssninja.com/javascript/gmail-dragout http://www.thecssninja.com/javascript/gmail-dragout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-GB"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="author" content="The CSS Ninja"> <meta name="keywords" content="Drag and drop, HTML5, DownloadURL, setData, dataTransfer"> <meta name="description" content="How to create reverse drag and drop functionality like Gmail in Chrome 5 and upwards"> <meta name="robots" content="all"> <meta name="copyright" content="The CSS Ninja"> <link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> <title>Drag a file from a website to your filesystem like Gmail does | The CSS Ninja</title> </head> <body> <div class="container"> <h1>Drag out any of these links to your dekstop</h1> <a href="Eadui.ttf" id="dragout" class="dragme" draggable="true" data-downloadurl="application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf">Font file</a> <a href="Eadui.ttf" id="dragout2" class="dragme" draggable="true" data-downloadurl="application/pdf:HTML5CheatSheet.pdf:http://thecssninja.come/demo/gmail_dragout/html5-cheat-sheet.pdf">PDF file</a> </div> <script type="text/javascript"> var files = [document.getElementById("dragout"),document.getElementById("dragout2"),document.getElementById("dragout3")], fileDetails = []; // Some forward thinking, utilise the custom data attribute to extend attributes available. if(typeof files[0].dataset === "undefined") { // Grab it the old way fileDetails[0] = files[0].getAttribute("data-downloadurl"); fileDetails[1] = files[1].getAttribute("data-downloadurl"); } else { fileDetails[0] = files[0].dataset.downloadurl; fileDetails[1] = files[1].dataset.downloadurl; } files[0].addEventListener("dragstart",function(evt){ evt.dataTransfer.setData("DownloadURL",fileDetails[0]); },false); files[1].addEventListener("dragstart",function(evt){ evt.dataTransfer.setData("DownloadURL",fileDetails[1]); },false); </script> </body> </html>
1 个解决方案
解决方案1
0 2016-04-27 01:56:40
Your code works fine in Chrome, FF, Opera, Safari and Microsoft Edge.您的代码在 Chrome、FF、Opera、Safari 和 Microsoft Edge 中运行良好。
Why work on an older browser that Microsoft no longer supports ?为什么要在Microsoft 不再支持的旧浏览器上工作？
My suggestion would be because it's no longer supported tell your users to use a supported browser .我的建议是因为它不再受支持，请告诉您的用户使用受支持的浏览器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.