在窗口之间拖放图像,而不是链接 - HTML5 [英] Drag and drop images, and not links, between windows - HTML5
问题描述
我正在尝试在 HTML5 中制作一个拖放上传器,并附加要求能够使用从我不拥有且无法编辑的其他网站(主要是图像)拖动的文件.
在这种情况下,在 ondrop
事件中,我没有使用 e.dataTransfer.files
从本地计算机下载图像并发布它,而是使用以下命令检索 URLe.dataTransfer.getData('URL')
并将其发布到服务器以供其下载服务器端.
工作正常,除非我拖动包含在链接中的图像.
它在从 元素开始拖动时有效,但不适用于包含在
另一个有 2 张图片来演示我的问题:
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 thedragstart
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屋!