javascript - jQuery 的 "uploadProgress"未在 "$.ajax"中触发

Question

我是 jQuery 新手，目前正在处理文件上传。我想在每次上传图片时添加一些进度条。我在 jQuery 中使用了 uploadProgress 但它似乎不起作用。这是我的代码:

$('#_form_').on('submit', function(e){

   var file_and_desc = new FormData($(this)[0]),
       form_url = "_pages/_form_";

       var ext = choose.val(),
           allowed = ['jpg','png'];

       if(ext){
          var get_ext = ext.split('.');
              get_ext.reverse();

              if($.inArray(get_ext[0].toLowerCase(), allowed) > -1){
                   //upload image
                   $.ajax({
                         url : form_url,
                         type: 'POST',
                         data: file_and_desc,
                         contentType: false,
                         processData: false,
                         uploadProgress: function(event, positio, total, percentComplete){
                          $('h1').html(percentComplete);
                         },
                         success: function(data){
                              // some code here...
                         }
                   });
              }
       }
});

就是这样!我该怎么办？

Answer 1

根据$.ajax()引用，uploadProgress 不是有效选项。

而是使用 xhr 选项，它允许您在 ajax 请求使用的 XMLHttpRequest 上设置进度监听器。

this answer展示了如何做到这一点:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                //Do something with upload progress here
            }
       }, false);
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});