ухватить изображение, перетащив его в текстовое поле в javascript

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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