поймать изображение, перетащенное в текстовое поле в JavaScript - PullRequest
Новая
       34

поймать изображение, перетащенное в текстовое поле в JavaScript

3 голосов
/ 20 июня 2009

Я хочу разрешить пользователю перетаскивать изображение с веб-страницы в мое веб-приложение, а затем сохранять и использовать URL-адрес изображения в другом месте приложения. Поэтому я создаю поле ввода в качестве цели перетаскивания.

Но так как это позволяет отбрасывать любой перетаскиваемый веб-объект (например, ссылки), мне нужно выполнить некоторую проверку ошибок. Я мог бы поставить кнопку там, но было бы лучше, если бы падение определялось автоматически.

Итак, вопрос в том ... существуют ли какие-либо обработчики событий, в первую очередь поддерживаемые в IE7 и FF3, которые срабатывают при удалении изображения? Это просто вызывает событие изменения на поле?

Ответы [ 2 ]

1 голос
/ 20 июня 2009

Нет, насколько мне известно, нет событий, которые сработают, как только вы совершите падение.

Вот возможное решение: 

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) не позволяют помещать элементы в поля, как в других браузерах. Возможно, стоит создать его с нуля - там, где все на странице перетаскивается ...

0 голосов
/ 20 июня 2009

Стандартное событие вы не получите сразу после перетаскивания (только после нажатия за пределами текстового поля), но, возможно, вы можете использовать какой-то тип DragListener ...

Чтобы проверить, является ли URL допустимым изображением, лучше проверить расширение (JPG, PNG, GIF ...) и проверить, начинается ли URL с «file:» - если это так, он ссылается в локальный файл изображения, и вы должны его игнорировать.

...