进度上的jQuery Ajax文件上传挂起

Question

我正在使用jQuery上传文件。 一切正常，直到我添加了xhr: function () {...}代码来跟踪文件上传进度。 现在，它仅在Start loading image...后挂起。 如果我从$.ajax删除此块，则文件上传有效。

function showProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('.meter').attr({'width': percentComplete + '%'});
  }
}


console.log('Start loading image...')
$.ajax({
  url: '/uploadimage',
  type: 'POST',
  xhr: function () {
    myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
      myXhr.upload.addEventListener('progress', showProgress, false);
    } else {
      console.log("Upload progress is not supported.");
    }
    return myXhr;
  },

  //Ajax events
  beforeSend: function (xhr) {
    // CSRF...
  },
  success: function (data) {
    // do smth
  },

  // Form data
  data: formData,
  cache: false,
  contentType: false,
  processData: false
});

我在处理上传进度错误吗？ 谢谢。

Answer 1

您解决了吗？ 您是使用提供的上传模板还是使用自己的自定义标记？

以下对我有用：

<script type="text/javascript">
$(document).ready(function () {
    $('#btnContinue').prop('disabled', true);
    $('#fileupload').fileupload({
        url: '@Url.Action("UploadChunk", "Upload")',
        maxChunkSize: 1048576,
    }).addClass('fileupload-processing')
    .bind('fileuploadalways', function (e, data) {
        if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) {
            var pre = $('#fileIds').val() == "" ?  ';' : '';
            var append = $('#fileIds').val() + pre + data.result.id + ';';
            $('#fileIds').val(append);
        }
    })
    .bind('fileuploaddone', function (e, data) {
        $('#btnContinue').prop('disabled', false);
    });

    $.ajax({
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    });
});
</script>

我的设置确实有问题，但是您应该可以参考我的代码以了解要实现的目标。

提交其他表单数据而不设置formData