Как заставить XMLHTTPRequest правильно работать в Internet Explorer 11 - PullRequest
Новая
       37

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

0 голосов
/ 09 апреля 2019

Поэтому я использую 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, когда я авторизован.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

Я добавил еще один логин, вот код. 

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. И бросает эту неприятную ошибку. И сервер просто возвращает строку «Недостаточно прав для загрузки»

0 голосов
/ 10 апреля 2019

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

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