jQuery/HTML5 FileAPI：爲什麼沒有拖動事件觸發？

當我通過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); 
     }); 
    } 
});

來源

2012-05-11 BrianFreud

當你使用Firebug在Firefox上運行它是說：

e.dataTransfer is undefined

所以，你會喜歡去改變它：

e.originalEvent.dataTransfer

這裏是example

來源

2012-05-11 01:41:03

糟糕！但即使是固定的，這也不是原因。仍然是同樣的問題。 – BrianFreud

^^與之前的答案有關。：D – BrianFreud

嗯，我一直只使用Chrome瀏覽器至此。我的腳本中有一些東西似乎讓Chrome和Firefox都吞下了任何錯誤，這是不幸的，所以我看不到這一點。在Firefox中，至少會發生藍/白顏色變化，但在Chrome中完全沒有任何變化。重新放棄事件，這個答案特別適用於，我必須猜測，這個答案是正確的;也許代碼本身目前是錯誤的，因爲在Chrome中放置圖像仍然沒有任何效果，並且在Firefox中，它只是像正常一樣將圖像加載爲新頁面。 – BrianFreud

有幾件事。

首先確保您使用http：而不是file：scheme加載頁面。使用文件：您的放置事件將會啓動，但FileReader會以靜默方式失敗。

接下來在FileReader.onload中，您將添加html到這個這是FileReader。嘗試將它添加到一個html元素。在下面的代碼中#files指向一個列表。

最後將dataURL嵌入到html中，使用Elements檢查器檢查，但在標記中不可見。

$(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); 
      }); 
     } 
    }); 
});

來源

2012-05-11 06:33:58 Maurice

jQuery/HTML5 FileAPI：爲什麼沒有拖動事件觸發？

回答

相關問題