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打开文件的方式，我们这种做法是可以满足要求的。