Question

因此，我正在使用XMLHttpRequest上载文件，并检查其上载状态以制作简单的进度条。在Mozilla / Chrome / IE11上可以正常工作，但是有时我会从服务器返回给用户未授权上传的用户，然后返回诸如“未授权”之类的String。 Firefox / Chrome可以轻松地将它们快速地上传到100％的上传进度，这很容易完成。 Internet Explorer引发错误： XMLHttpRequest：网络错误0x2ee2，由于错误00002ee2而无法完成操作。

$(document).ready(function() {
  $("#uploadProgressBar").css("opacity", "0");
  $("#fileForm").on("submit", function(event) {
    event.preventDefault();
    $("#uploadState").text("Upload state: ");
    $("#uploadProgressBar").fadeTo(100, 1);
    var formData = new FormData($("#fileForm")[0]);
    $.ajax({
      xhr: function xhr() {
        $("#sss-upload").attr("disabled", true);
        $("#file-upload").attr("disabled", true);
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(e) {
          console.log(e)
          console.log(e.lengthComputable)
      console.log(xhr.readyState)
          if (e.lengthComputable) {
        console.log("EVENT LISTENER")
            var percent = Math.round((e.loaded / e.total) * 100);
            $("#uploadProgress")
              .attr("aria-valuenow", percent)
              .css("width", percent + "%")
              .text(percent + "%");
            if (percent == 100) uploadStateLoop();
          }
        }); //xhr.onload = uploadStateLoop;
    console.log(xhr.readyState)
        console.log("ADASDASDASDASDASDASDASDASDASDAS XHR UPLOAD")
        return xhr;
      },
      type: "POST",
      beforeSend: function beforeSend(xhr) {
        xhr.setRequestHeader(
          "Authorization",
          "Basic " +
            window.btoa(getCookie("username") + ":" + getCookie("password"))
        );
      },
      url: "/edgeappupload",
      data: formData,
      processData: false,
      error : function() {
            uploadStateLoop();
      },
      contentType: false
    });
  });
  $("#fileForm").on("change", "#sss-upload", function() {
    if ($("#sss-upload").get(0).files.length === 0) {
      $("#file-upload").attr("disabled", true);
    } else {
      $("#file-upload").attr("disabled", false);
    }
  });
});

经授权，它可以在IE11以及Firefox和Chrome上正常工作。

Answer 1

我认为问题可能与the Ajax dataType and contentType property有关，根据您的描述，您希望将参数发送到服务器并希望获取返回数据，因此，最好添加Ajax dataType和contentType属性，就像这样：

$.ajax({
  url:url,
  type:"POST",
  data:data,
  contentType:"application/json; charset=utf-8",
  dataType:"json",
  success: function(){
  ...
  }
});

Answer 2

我在其中添加了另一个日志，这里是代码。

xhr.upload.addEventListener("progress", function(e) {
          console.log(e)
          console.log(e.lengthComputable)
      console.log(xhr.readyState)
          if (e.lengthComputable) {
        console.log("EVENT LISTENER")
            var percent = Math.round((e.loaded / e.total) * 100);
            $("#uploadProgress")
              .attr("aria-valuenow", percent)
              .css("width", percent + "%")
              .text(percent + "%");
            if (percent == 100) uploadStateLoop();
        console.log("EVENT LISTENER END")
          }

这是控制台的输出：

Internet Explorer 11

Firefox

因此在firefox中，加载非常快（什么都没有），因为没有特权，因此它返回一个字符串。但是在Internet Explorer中，它的加载结束了：~~ 3670016/94882688。并抛出此令人讨厌的错误。服务器只是返回字符串“上传权限不足”

如何使XMLHTTPRequest在Internet Explorer 11上正常工作

2 个答案: