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
    }
});

jQuery＆＃39; uploadProgress＆＃34;没有在＆＃34; $。ajax＆＃34;

1 个答案: