在窗口之间拖放图像，而不是链接 - HTML5

问题描述

我试图在HTML5中制作一个拖放上传器，并且要求能够从其他网站拖拽的文件中进行添加，而这些网站是我没有的，而且无法编辑（主要是图片）。 >

在这种情况下，在

我查看了 e.dataTransfer.getData（） 看看是否接受了其他有用的参数。另一个选择是文本，并提出了相同的结果作为网址。

有没有一种方法来获取图像的网址或注定是因为浏览器实际上并没有携带图像的URL时，拖动图像封闭在一个链接（即：我拖动链接，而不是图像）？

更新 h3>

为了说明我在这里创建了一个jsfiddle：

另一张有2张图片来展示我的问题：

在单独的选项卡中打开它们，然后尝试拖放拖放区域中的两个图像。

第一张图片，我得到了我想要的： https://www.gstatic.com/webp/gallery/1.sm。 jpg

第二个是 http://www.google.com/ ，图片链接在第二种情况下，有没有办法获得图像地址，而不是中的链接， ondrop listenner，还是不可能？ （请记住，图片可以在任何网站上，我不能捕捉任何 dragstart 事件，基本上只有下降在 dragover 事件处理程序中，迭代

I'm trying to make a drag and drop uploader in HTML5 with the added requirement of being able to do so with files dragged from other websites I don't own and can't edit (mostly images).

In this case, on the ondrop event, instead of downloading the image from the local computer using e.dataTransfer.files and posting it, I retrieve the URL with e.dataTransfer.getData('URL') and post it to the server for it to download server-side.

Works fines, except when I drag an image enclosed in a link.

It works when initiating drag from an <img> element, but not with an <img> enclosed in <a> element. In the latter one, e.dataTransfer.getData('URL') gives me the href of the link, not the src of the image.

I looked into e.dataTransfer.getData() to see if it accepted other arguments that could help. The other alternative was "Text", and it brought up the same results as "URL".

Is there a way to get the image URL or am I doomed because the browser doesn't actualy carry the image URL when dragging an image enclosed in a link (ie : I'm dragging the link, not the image)?

UPDATE

To illustrate I created a jsfiddle here : https://jsfiddle.net/2m58rfou/
And another one with 2 images to demonstrate my problem here : https://jsfiddle.net/870asboa/
Open them in separate tabs and try dragging both images in the drop zone.

With the first image, I get what I want : https://www.gstatic.com/webp/gallery/1.sm.jpg
With the second one I get http://www.google.com/, the link the image is enclosed in, rather than the image address.

In the second scenario, is there a way to get the image address and not the link in the ondrop listenner, or is it impossible ? (remember that the images can be on any website, I can't catch any dragstart event, basically only the drop one).

解决方案

At dragover event handler, iterating event.dataTransfer.types

the array contains three types:

• text/plain
• text/uri-list
• text/html

text/html is the html string of the dragged <img> element.

Get the string using by passing "text/html" to .getData(), then either extract src of html string using RegExp or create an element and append the html string to the element, then get src of <img> element using .src.

holder.ondrop = function (e) {
  e.preventDefault();
  this.className = '';
  var img = e.dataTransfer.getData("text/html");
  var div = document.createElement("div");
  div.innerHTML = img;
  var src = div.firstChild.src;
  console.log(div.firstChild, src);
  results.innerText = src;
}

jsfiddle https://jsfiddle.net/2m58rfou/6/

这篇关于在窗口之间拖放图像，而不是链接 - HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！