javascript - 拖放图片上传并删除 URL(不是文件)

Question

我想实现以下目标:

假设打开了两个浏览器窗口，一个 (a) 带有一个网站，该网站有一个图片文件放置区，另一个 (b) 带有一些图片。

我希望能够将图片从 (b) 拖放到 (a) 的拖放区域并且 (a) 应该下载并存储图片(无需我先将图片从 (b) 下载到我的计算机然后将文件拖放到(a)的拖放区。

我什至不确定如何在 JS 中开始这个。有什么建议吗？

Answer 1

这是一个多步骤操作，可以通过许多不同的方式完成。以下是基本解决方案的概述(使用 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 以及一个 dropzone 区域，并开始监听你的 dropzone 上的 drop 事件。当图像被放置在这里时，使用 DataTransfer 检索它的 URL(阅读更多关于 DataTransfer here 的信息)。将空 img 的 src 设置为您刚刚检索到的 URL。

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

保存图片

通过 Javascript 将图像自动保存到您的计算机是一个比较棘手的主题，但值得庆幸的是人们已经创建了各种变通解决方案。我建议实现 FileSaver.js或类似的东西。但是，要使用 FileSaver.js 保存图像，您需要先将 img 转换为 blob 或 canvas 对象，您可以阅读 here .

示例(不保存)

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" />