Question

使用Asp.Net 2.0，我正在尝试使用asp.net拖放文件。对于这个过程我正在使用以下js＆＃39;

i2

这就是错误的原因

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>

我正在使用IE11

所以我使用了一个代码

JavaScript runtime error: Object doesn't support property or method 'addEventListener

它不能正常工作

我的脚本是

<meta http-equiv="X-UA-Compatible" content="IE=edge;" />

我的aspx页面是

 <script type="text/javascript" language="javascript">



    var selectedFiles;

      $(document).ready(function () {
alert("");
        if (!Modernizr.draganddrop) {
        //alert("2");
          alert("This browser doesn't support File API and Drag & Drop features of HTML5!");
          return;
        }

        var box;
        box = document.getElementById("box");
       alert(box);
        box.addEventListener("dragenter", OnDragEnter, false);
        box.addEventListener("dragover", OnDragOver, false);
        box.addEventListener("drop", OnDrop, false);

        $("#upload").click(function () {
          var data = new FormData();
          for (var i = 0; i < selectedFiles.length; i++) {
            data.append(selectedFiles[i].name, selectedFiles[i]);
          }
          $.ajax({
            type: "POST",
            url: "FileHandler.ashx",
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
              alert(result);
            },
            error: function () {
              alert("There was error uploading files!");
            }
          });
        });

      });;

      function OnDragEnter(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function OnDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
      }

      function OnDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        selectedFiles = e.dataTransfer.files;
        $("#box").text(selectedFiles.length + " file(s) selected for uploading!");
      }



    </script>

但是这个应用程序拖放文件在chrome和firefox中运行良好 IE中唯一的问题

建议我找到解决方案。提前谢谢。

Answer 1

从met标签中取出ie11，然后添加以下代码。这解释为here。

/* IE11 Fix for SP2010 */
if (typeof UserAgentInfo.strBrowser !== 'undefined' && !window.addEventListener) {
     UserAgentInfo.strBrowser=1;
}

Answer 2

您在IE中设置的文档模式是什么？

按F12键，您会看到带有数字或字边缘的下拉列表，请确保将其设置为边缘。即使您以前将元标记设置为其他任何内容，您也可以使用元标记设置文档模式。

Answer 3

编辑plunkr以查看它失败的地方 - 我没有手持jQuery 1.7.2但是在Internet Explorer 11中测试过并且看不到该错误。我正在使用click事件，因为它是一个在浏览器中生成的更简单的事件，它是抛出的addEventListener方法。

http://embed.plnkr.co/Smm421v5In2YYJAJXNTW/preview

<!DOCTYPE html>
<html>

  <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link data-require="bootstrap-css@3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.0.0-rc2" data-semver="3.0.0-rc2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="box" style="height: 100px; background-color: red">Click area</div>
  </body>
</html>

......并在剧本中......

'use strict';
/* global $ */


console.log("Hey!");
$(document).ready(function() {
  var box;
  box = document.getElementById("box");
  console.log(box);
  box.addEventListener("click", OnClick, false);
});    

var OnClick = function() {
  console.log('in OnClick');
  $("#box").text("Clicked");
};

Answer 4

这是由于下面在web.config文件中添加了兼容性问题

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=EmulateIE9" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

JavaScript运行时错误：对象不支持属性或方法＆＃39; addEventListener

4 个答案: