火狐浏览器下上传时拖拽文件打开新页面问题解决

火狐浏览器文件拖拽上传解决方案

最新推荐文章于 2024-06-18 14:39:55 发布

原创最新推荐文章于 2024-06-18 14:39:55 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #upload #拖拽

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在火狐浏览器中解决文件拖拽上传时，避免文件被直接打开为新页面的问题。通过在脚本中添加事件监听器，如dragenter、dragover和drop，可以有效阻止默认行为，确保文件正确上传。

火狐防止拖入文件直接打开新页面

- - 火狐浏览器下上传时拖拽文件，会打开新的页面，解决方法如下；

火狐浏览器下上传时拖拽文件，会打开新的页面，解决方法如下；

 <div class="form-group" id="dropbox">
            <label class="control-label form-required-mark col-sm-2"
                   th:text="#{majorProgram.newAttachment}">新培养方案附件</label>
            <div class="col-sm-10">
                <input id="attachment" name="attachment" type="file" class="file" src="/file.txt"/>
            </div>
        </div>

直接在script脚本里加上

 dropbox.addEventListener("dragenter", function(e){
        e.stopPropagation();
        e.preventDefault();
    }, false);
    dropbox.addEventListener("dragover", function(e){
        e.stopPropagation();
        e.preventDefault();
    }, false);
    dropbox.addEventListener("drop", function(e){
        e.stopPropagation();
        e.preventDefault();
    }, false);

注意：dropbox是<div class="form-group" id="dropbox">的id