我们在使用html5的拖拽上传时,做法往往是监听一个控件范围内的drop事件。但是用户在操作的时候往往会出现文件没有进入到控件范围内就释放的情况,这种情况在以下浏览器中会出现不同的情况,下面是实验结果:
chrome: 如果该文件是浏览器可浏览文件(图片等),浏览器会在当前窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
fireFox: 如果该文件是浏览器可浏览文件(图片等),浏览器会在新窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
IE: 如果该文件是浏览器可浏览文件(图片等),浏览器会在当前窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
我们最不能接受的就是在 chrome 和 ie中的表现,因为我们的页面会被覆盖,填写的内容会丢失,为了避免这种情况的出现,我们需要做一些处理。说白了就是通过禁用浏览器的默认行为来禁止浏览器触发drop事件。代码如下所示:
我们在使用html5的拖拽上传时,做法往往是监听一个控件范围内的drop事件。但是用户在操作的时候往往会出现文件没有进入到控件范围内就释放的情况,这种情况在以下浏览器中会出现不同的情况,下面是实验结果:
chrome: 如果该文件是浏览器可浏览文件(图片等),浏览器会在当前窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
fireFox: 如果该文件是浏览器可浏览文件(图片等),浏览器会在新窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
IE: 如果该文件是浏览器可浏览文件(图片等),浏览器会在当前窗口打开文件的预览;如果是不可浏览文件,则会触发浏览器的下载
我们最不能接受的就是在 chrome 和 ie中的表现,因为我们的页面会被覆盖,填写的内容会丢失,为了避免这种情况的出现,我们需要做一些处理。说白了就是通过禁用浏览器的默认行为来禁止浏览器触发drop事件。代码如下所示: