通过 iframe 拖放文件在 IE 11 中不起作用答案

【问题标题】：Drag and drop a file is not working in IE 11 over iframe通过 iframe 拖放文件在 IE 11 中不起作用
【发布时间】：2018-05-07 18:58:58
【问题描述】：

我正在开发一个基本的拖放功能，它在其他浏览器中运行良好，但在 IE 11 中却没有。我在另一个项目中使用 iframe 调用以下 html 代码。

没有 iframe 但没有 iframe 可以正常工作。任何人都可以为此提供解决方案吗？

提前致谢。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Upload</title>
<meta name="description" content="File Upload ">
<meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">  
    <table><tbody> <tr><td><span id="upload" >
                          <span>Upload</span><input id="fileupload" type="file" name="fileupload">
                    </span></td><td id="filename"></td><td id="percent" style="padding-left: 35px;"></td></tr>
    </tbody>
</table>
</div>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
 <script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $(document).bind('drop dragover', function(e) {
            /* e.preventDefault(); */
        });
        if(typeof window.parent.fileid  == 'undefined'){
            window.parent.fileid = "";
        }            
        var params = // some prams
        $('#fileupload').fileupload({
            dataType : 'json',
            formData : params,
            url : '${contextpath}/upload', 
            autoUpload: true,
        });         
        $('#fileupload')
        .bind('fileuploaddone', function (e, data) {          
            //uploaded successfully
       }, 100);
        }).bind('fileuploadfail', function (e, data) {
        // upload is fail
        })  
    });

</script>
</body> 
</html>

【问题讨论】：

它似乎无法识别放置区域（iframe 内容）。直接要求离开页面？，在这种情况下，我们是否需要在父窗口中编写任何 mouseove 或 mouseenter 事件？
尝试将forceIframeTransport: true 添加到您传递给fileupload 函数的选项中。请先阅读本文档github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads
什么是“不工作”？我在 IE11 上对其进行了测试（经过多次代码重新排列，复制/粘贴不起作用），脚本向服务器发送了 POST 请求和文件。
@muecas：浏览器提示“您确定要离开此页面吗？”当我尝试在 IE11 中的此 iframe 区域上放置文件时。我认为'drag enter'事件此时没有触发。我尝试了不同的方法，但没有解决。
大家好，我在加载应用程序时将兼容性更改为 IE10 后解决了。

标签： javascript iframe internet-explorer-11 jquery-file-upload blueimp

【解决方案1】：

我对您的代码进行了一些重新排列测试，我注意到浏览器显示“您确定要离开此页面吗？”。您可以通过一些方式解决此问题，例如

您可以将浏览器兼容性从 IE11 更改为 IE10
Yoy 需要设置“forceIframeTransport: true”选项来强制所有浏览器使用 iframe 传输模块进行文件上传并设置重定向选项以检索放置结果

你的文件上传功能应该是

$('#fileupload').fileupload({
            dataType : 'json',
            formData : params,
            url : '${contextpath}/upload', 
            autoUpload: true,
            forceIframeTransport: true,
            'redirect',
        });

【讨论】：