拖放下载，支持IE Javascript/Jquery/Html5

Drag Drop Download which supports IE Javascript/Jquery/Html5

本文关键字：Jquery Html5 Javascript IE 下载 支持 拖放      更新时间：2023-09-26

我尝试了可用的拖放下载示例，但问题是它在 Chrome 中运行良好，但是当您尝试将文件拖放到本地计算机上以打算使用 IE 下载时，它只会下载文件的快捷方式链接。

任何人都有解决问题的方法？？ 请分享...

我尝试使用以下链接中的代码。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>

您的代码在Chrome，FF，Opera，Safari和Microsoft Edge中运行良好。

为什么要在Microsoft不再支持的旧浏览器上运行？

我的建议是因为它不再受支持，告诉您的用户使用受支持的浏览器。

相关文章：