拖放图片上传时，如何拖放URL（而不是文件）？

Question

拖放图片上传时，如何拖放URL（而不是文件）？

javascripturldrag-and-drop

3

我想实现以下功能：

假设有两个浏览器窗口，一个（a）打开了一个具有图片文件拖放区域的网站，另一个（b）则打开一些图片。

我希望能够将（b）中的图片从其中拖放到（a）的拖放区域中，并且（a）可以下载并保存图片（无需我先将图片从（b）下载到我的计算机，然后再将文件拖放到（a）的拖放区域中）。

我不确定如何用JS开始这个过程。您有什么建议吗？

- Armin Hierstetter

你需要从第一个浏览器中复制URL（带有一些元数据来标识剪贴板内容的来源），然后将其粘贴到第二个浏览器中。这篇文章可能会对如何使用Javascript进行复制/粘贴有所帮助：https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/ （你还需要结合拖放API https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API 进行操作）。 - ValLeNain

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dylan Stark · Accepted Answer

这是一个需要多步操作的任务，有很多不同的方式可以完成。以下是一个基本解决方案的概述（使用jQuery）。

阻止浏览器默认行为

许多浏览器会自动将当前窗口/选项卡的URL替换为你正在拖动的内容的URL，从而刷新页面。这不是你想要的行为，因此第一步是停止这些事件。

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

获取图片的URL地址

创建一个没有src属性的 img标签来作为拖放区域，并开始监听该区域上的drop事件。当有一张图片被拖放到该区域时，使用DataTransfer (请在此处了解更多关于DataTransfer的信息here) 来检索图片的URL地址。将刚刚检索到的URL地址设置为空的img标签的src属性值。

$('#dropzone').on('drop', function(e) {
    var url = e.originalEvent.dataTransfer.getData('url');
    $('#result').attr("src",url);
});

保存图片

通过Javascript自动将图像保存到计算机上是一个比较棘手的问题，但幸运的是人们已经创建了各种解决方案。我建议实施FileSaver.js或类似的东西。然而，要使用FileSaver.js保存图像，您需要先将转换为blob或canvas对象，您可以在这里了解相关信息。

示例（无保存）

window.addEventListener("dragover", function(e) {
  e = e || event;
  e.preventDefault();
}, false);
window.addEventListener("drop", function(e) {
  e = e || event;
  e.preventDefault();
}, false);

$('#dropzone')
  .on('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    var url = e.originalEvent.dataTransfer.getData('url');
    $('#result').attr("src", url);
  });

#dropzone {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}
#result {
  margin: 10px;
  max-width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dropzone">Drop Here</div>
<img id="result" />