html5 拖拽上傳文件時，屏蔽瀏覽器默認打開文件

　　我們在使用html5的拖拽上傳時，做法往往是監聽一個控件范圍內的drop事件。但是用戶在操作的時候往往會出現文件沒有進入到控件范圍內就釋放的情況，這種情況在以下瀏覽器中會出現不同的情況，下面是實驗結果：

　　　　chrome： 如果該文件是瀏覽器可瀏覽文件（圖片等），瀏覽器會在當前窗口打開文件的預覽；如果是不可瀏覽文件，則會觸發瀏覽器的下載

　　　　fireFox： 如果該文件是瀏覽器可瀏覽文件（圖片等），瀏覽器會在新窗口打開文件的預覽；如果是不可瀏覽文件，則會觸發瀏覽器的下載
　　　　IE： 如果該文件是瀏覽器可瀏覽文件（圖片等），瀏覽器會在當前窗口打開文件的預覽；如果是不可瀏覽文件，則會觸發瀏覽器的下載

　　我們最不能接受的就是在 chrome 和 ie中的表現，因為我們的頁面會被覆蓋，填寫的內容會丟失，為了避免這種情況的出現，我們需要做一些處理。說白了就是通過禁用瀏覽器的默認行為來禁止瀏覽器觸發drop事件。代碼如下所示：

　　

  /**
   * 頁面禁用拖拽上傳時 瀏覽器默認打開圖片
   */
  document.addEventListener('drop', function (e) {
    e.preventDefault()
  }, false)
  document.addEventListener('dragover', function (e) {
    e.preventDefault()
  }, false)

　　通過以上兩行代碼，就可以禁用瀏覽器的drop 和 dragover 兩個事件的默認行為。由於js中存在事件冒泡，我們在document元素上添加了事件綁定函數就可以阻止整個頁面由於拖拽上傳帶來的問題，並且不會影響到上傳控件的功能。這種處理方式親測在chrome、ie下都可以，在firefox下無效。但是由於firefox打開文件的方式，我們這種做法是可以滿足要求的。