javascriptのテキストフィールドに画像をドラッグするとキャッチ

Question

私は、ユーザーがWebページから自分のWebアプリケーションに画像をドラッグし、その画像URLをアプリケーション内の別の場所に保存して使用できるようにしたいと考えています。だから私はドラッグターゲットとして入力フィールドを作成しています。

しかし、それはドラッグ可能なウェブオブジェクト（リンクなど）をドロップできるので、私は何らかのエラーチェックを行う必要があります。そこにボタンを置くことはできますが、ドロップが自動検出されればより良いでしょう。

問題は... IE7とFF3で主にサポートされているイベントハンドラは、画像がドロップされたときにトリガされるのですか？単にフィールド上で変更イベントを引き起こすだけですか？

Answer 1

あなたは（唯一のテキストフィールドの外をクリックした後）を直接ドラッグ＆ドロップした後、標準のイベントを取得することはできませんが、おそらくあなたは、URLがあるかどうかを確認するには...

をDragListenerのいくつかの種類を使用することができます有効な画像であれば、拡張子（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）を使用すると、他のブラウザのようなフィールドにアイテムをドロップさせないことが表示されます。ここ

が可能なソリューションです。ページ上のすべてがドラッグ可能なので、ゼロから作成する価値があるかもしれません...