Question

我想实现以下目标：

想象一下，有两个浏览器窗口打开，一个（a）的网站有一个用于图片文件的放置区域，另一个（b）有一些图片。

我希望能够将图片从（b）拖放到（a）的拖放区域，并且（a）应该下载并存储图片（没有我首先将图片从（b）下载到我的电脑）然后将文件放在（a）的删除区域中。

我不确定如何在JS中启动它。有什么建议吗？

Answer 1

这是一个多步骤操作，可以通过多种方式完成。以下是基本解决方案的大纲（使用jQuery）。

防止浏览器默认行为

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

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

获取图片的网址

创建一个img没有src以及dropzone区域，并开始在您的dropzone上监听drop个事件。在此处删除图片时，请使用DataTransfer检索其网址（了解有关DataTransfer here的详情）。将空src的{{1}}设置为刚刚检索到的网址。

img

保存图片

通过Javascript自动将图像保存到您的计算机是一个棘手的主题，但幸运的是人们已经创建了各种解决方案。我建议实施FileSaver.js或类似的东西。要使用FileSaver.js保存图像，您需要先将$('#dropzone').on('drop', function(e) { var url = e.originalEvent.dataTransfer.getData('url'); $('#result').attr("src",url); });转换为blob或canvas对象，您可以阅读here。

示例（不保存）

＆＃13;

img

＆＃13;

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);
  });

＆＃13;

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

＆＃13;

拖放图片上传丢弃URL（不是文件）

1 个答案: