2012-05-11 7 views
0

imageContainer divにファイルをドラッグしても何も起こりません。なぜですか?などコンソールで何も、ページ上の何もない、jQuery/HTML5 FileAPI:ドラッグイベントがトリガしているように見えないのはなぜですか?

<div id="imageContainer" style="height: 724px; width: 100%; "></div> 

... 

$('#imageContainer').on({ 
    dragenter: function dragEnter() { 
     console.log('enter'); 
     $(this).css('background-color', 'lightBlue'); 
    }, 
    dragleave: function dragLeave() { 
     console.log('leave'); 
     $(this).css('background-color', 'white'); 
    }, 
    dragover: false, 
    drop: function dragDrop (e) { 
     console.log('drop'); 
     jQuery.each(e.dataTransfer.files, function (index, file) { 
      var fileReader = new FileReader(); 
      fileReader.onload = (function (file) { 
       return function (e) { 
        $(this).append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>'); 
       }; 
      })(file); 
      fileReader.readAsDataURL(file); 
     }); 
    } 
}); 

答えて

3

あなたはFirebugを持つFirefoxの上でそれを実行言いません:

e.dataTransfer is undefined 

だから、あなたがそれを変更したいと思います:

e.originalEvent.dataTransfer 

ここにはexample

+0

しかし、固定さえ、それは原因ではありません。それでも同じ問題。 – BrianFreud

+0

^^これまでの回答に関連しています。 :D – BrianFreud

+0

Hmmm、私はこの時点でのみChromeを使用していました。スクリプト内の何かがChromeとFirefoxの両方にエラーを飲み込んでいるようですが、これは残念なことですが、私はこれを見ることはできません。 Firefoxでは、少なくとも青/白の色の変化が起こりますが、Chromeではまったく何も起こりません。この回答が特に当てはまるドロップイベントを再現すると、私はこの答えが正しいことを推測しなければなりません。おそらく、コード自体は間違っています。画像を削除するとChromeでは何も起こりませんし、Firefoxでは通常と同じように画像を新しいページとして読み込みます。 – BrianFreud

0

いくつかあります。

まず、file:schemeの代わりにhttp:を使用してページを読み込むようにしてください。 file:ドロップイベントは発生しますが、FileReaderは自動的に失敗します。

次に、FileReader.onloadで、に、このというhtmlを追加します。これはFileReaderです。代わりにhtml要素に追加してみてください。以下のコードでは、#filesはリストを指しています。

最後に、dataURLがhtmlに埋め込まれています。要素インスペクタを使用してチェックしますが、マークアップには表示されません。

$(function() { 
    $('#dropTarget').on({ 
     dragenter: function dragEnter() { 
      console.log('enter'); 
      $(this).css('background-color', 'lightBlue'); 
     }, 
     dragleave: function dragLeave() { 
      console.log('leave'); 
      $(this).css('background-color', 'white'); 
     }, 
     dragover: false, 
     drop: function dragDrop(e) { 
      console.log('drop'); 
      jQuery.each(e.originalEvent.dataTransfer.files, function (index, file) { 
       var fileReader = new FileReader(); 
       fileReader.onload = function() { 
        console.log(this.result); 
        $('#files').append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + this.result + '</div>'); 
       }; 

       fileReader.readAsDataURL(file); 
      }); 
     } 
    }); 
}); 
関連する問題