捕获图像拖入javascript中的文本字段 [英] catch image dragged into a text field in javascript

问题描述

我想允许用户将图片从网页拖到我的网页应用中，然后在应用程序的其他位置存储和使用图片网址。所以我创建一个输入字段作为拖动目标。

I want to allow a user to drag an image from a web page into my web app and then store and use the image url elsewhere in the application. So i'm creating an input field as the drag target.

但是因为它允许删除任何可拖动的Web对象（如链接），我需要做一些错误检查。我可以在那里放一个按钮，但如果自动检测到丢弃会更好。

But since that allows to drop any draggable web object (like links), i need to do some error checking. I could put a button there, but it would be nicer if the drop is auto-detected.

所以问题是......是否有任何事件处理程序 - 主要支持在IE7和FF3中 - 在图像被丢弃时被触发？它只是简单地触发了该领域的变更事件吗？

So the question is...are there any event handlers - primarily supported in IE7 and FF3 - that get triggered when the image is dropped? Does it simply trigger a change event on the field?

推荐答案

不，据我所知，没有任何事件会发生火灾只要你做下跌。

No, to my knowledge, there are no events that'll fire as soon as you make the drop.

这是一个可能的解决方案：

Here's a possible solution:

var input = document.getElementById("input");
var lastVal = input.value;

setInterval(function() {
  if (input.value !== lastVal) {
    if (input.value) {
      if ( /\.(jpe?g|gif|bmp|png)(\?.*)?$/.test(input.value) ){
        alert('It\'s an image URL!!!');
      } else {
        alert('Not an image URL...');
      }
    }
    lastVal = input.value;
  }
}, 100);

这里演示： http://jsbin.com/izake

Demo here: http://jsbin.com/izake

注意：某些浏览器（IE）似乎没有不允许您将项目放入其他浏览器的字段中。从头开始创建一个可能是值得的 - 页面上的所有内容都是可拖动的......

Note: It appears that some browsers (IE) don't let you drop items into fields like other browsers. It may be worth creating one from scratch - where everything on the page is draggable...

这篇关于捕获图像拖入javascript中的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！