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>

我的设置确实存在问题，但您应该能够引用我的代码来实现您的目标。

Submit Additional Form Data without setting formData

随着进度挂起jQuery Ajax文件上传

1 个答案: