拖放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）;

它的作品魅力。