javascript - 没有任何插件Jquery的Ajax文件上传进度

Question

如何在 JQuery 中获取文件上传的进度，以便我可以更新有关文件上传的状态栏。

下面是我在 JQuery 中使用 Ajax 的文件上传代码:

         $('button').click(function(e) {
             var formData = new FormData($('#myform')[0]);
               $.ajax({
                  url: 'FileUploadExample',
                  type: 'post',
                  data: formData,
                  async: true,
                  cache: true,
                  contentType: false,
                  processData: false,
                  success: function(returndata) {
                  }
             });

       });

在谷歌搜索这个问题时，我遇到了 jquery.form.min.js 插件，它有选项 uploadProgress。

如何在不使用 JQuery/JavaScript 中的任何插件的情况下获取上传进度。

Answer 1

像这样使用 JQuery xhr 元素

var formData = new FormData($('#myForm')[0]);
$.ajax({
    url: url,
    type: 'POST',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
        }
        return myXhr;
    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

并且在 progressHandlerFunction 中，您可以访问 e.loaded 和 e.total of progress，例如

progressHandlerFunction(e)
{
    console.log(e.total+""+e.loaded);
}

$.ajaxSettings.xhr();是真正的XMLHttpRequest元素，在原生JS中你可以在XMLHttpRequest.upload的onProgress事件上绑定(bind)一个handler，然后你就可以得到event.total和event.loaded，每次event.loaded改变值都会触发progress事件。

• event.total = HTTP 请求的总大小。
• event.loaded= 当前上传值。

你可以用这个2做任何事情，你可以通过做得到百分比var percent=Math.round((event.loaded/event.total) * 100); 并相应地调整您的加载栏宽度。