本文介绍了在HTML5拖拽上传文件时，如何处理浏览器默认打开文件的行为，尤其是对于Chrome和IE浏览器。通过监听并阻止drop和dragover事件的默认行为，可以避免页面被覆盖导致内容丢失的问题。这种方法在Chrome和IE下有效，Firefox下虽然无效但已能满足需求，因为Firefox以新窗口预览文件，不影响页面本身。
我们在使用html5的拖拽上传时，做法往往是监听一个控件范围内的drop事件。但是用户在操作的时候往往会出现文件没有进入到控件范围内就释放的情况，这种情况在以下浏览器中会出现不同的情况，下面是实验结果：
chrome： 如果该文件是浏览器可浏览文件（图片等），浏览器会在当前窗口打开文件的预览；如果是不可浏览文件，则会触发浏览器的下载
fireFox： 如果该文件是浏览器可浏览文件（图片等），浏览器会在新窗口打开文件的预览；如果是不可浏览文件，则会触发浏览器的下载
IE： 如果该文件是浏览器可浏览文件（图片等），浏览器会在当前窗口打开文件的预览；如果是不可浏览文件，则会触发浏览器的下载
我们最不能接受的就是在 chrome 和 ie中的表现，因为我们的页面会被覆盖，填写的内容会丢失，为了避免这种情况的出现，我们需要做一些处理。说白了就是通过禁用浏览器的默认行为来禁止浏览器触发drop事件。代码如下所示：
最低0.47元/天 解锁文章
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
