javascript - 在 Javascript 中捕捉拖入文本字段的图像

Question

我想允许用户将网页中的图像拖到我的网络应用程序中，然后在应用程序的其他地方存储和使用图像 url。所以我正在创建一个输入字段作为拖动目标。

但由于这允许删除任何可拖动的 Web 对象(如链接)，我需要进行一些错误检查。我可以在那里放一个按钮，但如果能自动检测掉落会更好。

所以问题是......是否有任何事件处理程序 - 主要在 IE7 和 Firefox3 中支持 - 在图像被删除时被触发？它是否只是触发字段上的更改事件？

Answer 1

不，据我所知，没有任何事件会在您放下后立即触发。

这里有一个可能的解决方案:

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

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