Прогресс бар с ajax и Jquery

Question

я видел много примеров - все выглядело почти одинаково - создать индикатор выполнения (при загрузке файла - до завершения загрузки), поэтому я попробовал этот код -

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
                if (percentComplete === 1) {
                    $('.progress').addClass('hide');
                }
            }
        }, false);
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: "/echo/html",
    data: data,
    success: function (data) {}
});

игнорировать URL-адрес и данные - пример находится в xhr части

, поэтому, когда я попытался использовать это, я увидел, что многие люди говорят, что он больше не поддерживается с jQuery 1.9.3+. У кого-нибудь есть идея, как я могу это сделать?