拖放Html 5文件上傳 - 防止加載

Question

到目前爲止我有這個代碼。我可以看到dragenter和dragleave事件，但是當我放棄 文件時，即使調用preventDefault()，瀏覽器（Chrome或Firefox）也會打開文件（圖片）。任何人看到任何錯誤？我應該改變什麼？

<script type="text/javascript"> 
    $(function() { 
     var $box = $("#ulbox"); 
     $box.bind("dragenter", dragEnter); 

     $box.bind("dragleave", dragLeave); 
     $box.bind("drop", drop); 

     function dragEnter(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      console.log("dragEnter..."); 
      $(evt.target).addClass('over'); 
      return false; 
     } 
     function dragLeave(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      console.log("drag leave..."); 
      $(evt.target).removeClass('over'); 
      return false; 
     } 


     function drop(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      $(evt.target).removeClass('over'); 

      var files = evt.originalEvent.dataTransfer.files; 

      if (files.length > 0) { 
       alert("dropped"); 
       if (window.FormData !== undefined) { 
        var data = new FormData(); 
        for (i = 0; i < files.length; i++) { 
         data.append("file" + i, files[i]); 
        } 

        $.ajax({ 
         type: "POST", 
         url: "/api/upload", 
         contentType: false, 
         processData: false, 
         data: data, 
         success: function (res) { 
         } 
        }); 
       } else { 
        alert("browser sucks!"); 
       } 
      } 
      return false; 
     } 
     }); 
    </script> 
} 

<div id="ulbox" style="border: 5px dashed black; width: 300px; height: 100px;"> 
</div> 

Answer 1

刪除 $ box.bind（ 「dragleave」，dragLeave）;

加入此項： $ box.bind（「dragover」，dragLeave）;

它的作品魅力。