Блог

Главная - Вопросы по программированию - Как заставить XMLHttpRequest правильно работать в Internet Explorer 11

Как заставить XMLHttpRequest правильно работать в Internet Explorer 11

#javascript #upload #xmlhttprequest #internet-explorer-11

#javascript #загрузка #xmlhttprequest запрос #интернет-проводник-11 #xmlhttprequest #internet-explorer-11

Вопрос:

Итак, я использую XMLHttpRequest для загрузки файла и проверки его состояния загрузки, чтобы создать простой индикатор выполнения. Это нормально работает в Mozilla / Chrome / IE11, однако иногда я возвращаюсь с сервера пользователю, которому он не авторизован для загрузки, а затем возвращаю некоторую строку типа «Не авторизован». 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, когда я авторизован.

Ответ №1:

Я думаю, возможно, проблема связана со свойством Ajax DataType и ContentType, из вашего описания вы хотите отправить параметры на сервер и хотите получить возвращаемые данные, поэтому лучше добавить свойство Ajax DataType и ContentType, вот так:

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

Комментарии:

1. Тип данных ничего не изменил, все та же проблема, но спасибо за ответ

2. Поэтому я полагаю, что когда сервер возвращает строку, другие браузеры быстро думают, что загрузка завершена. Но ie не может справиться с этим и истекает время ожидания. Как это исправить?

Ответ №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 он заканчивается на loaded: ~~ 3670016/94882688. И выдает эту неприятную ошибку. И сервер просто возвращает строку «Недостаточно привилегий для загрузки».