在窗口之间拖放图像，而不是链接 - HTML5 [英] Drag and drop images, and not links, between windows - HTML5

问题描述

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

在这种情况下，在 ondrop 事件中，不是使用从本地计算机下载图像， e.dataTransfer.files 并发布它，我检索URL e.dataTransfer.getData（'URL'）并将其发布到服务器为它下载服务器端。

工程的罚款，除了当我拖动一个链接中的图像

它启动拖动一个< img> 元素，但不包含< code< code>< ;> 元素。在后者中， e.dataTransfer.getData（'URL'）给我链接的 href ，而不是

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

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

更新 h3>

为了说明我在这里创建了一个jsfiddle： https：// jsfiddle。 net / 2m58rfou /

另一张有2张图片来展示我的问题： https://jsfiddle.net/870asboa/

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

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

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

lockquote
DataTransfer.types 只读属性是在 dragstart 事件中设置的拖动
数据格式（作为字符串）的数组。
格式的顺序与
拖动操作中包含的数据顺序相同。

数组包含三个类型：

$ b

• text / plain


• text / uri-list
c> text / html

text / html 是被拖动的< img> 元素的 html 字符串。
$ b

通过传递text / html到 .getData（） ，然后使用 RegExp 来抽取 html 字符串的 src / code>或者创建一个元素并将 html 字符串添加到元素中，然后获取 src code>< img> 元素使用 .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/

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 DataTransfer.types read-only property is an array of the drag data formats (as strings) that were set in the dragstart event. The order of the formats is the same order as the data included in the drag operation.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！