首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery的文件上载进度条

使用jQuery的文件上载进度条
EN

Stack Overflow用户
提问于 2013-03-14 21:11:53
回答 8查看 401.7K关注 0票数 169

我正在尝试在我的项目中实现AJAX文件上传功能。为此,我使用jQuery;我的代码使用AJAX提交数据。我还想实现一个文件上传进度条。我该怎么做呢?有没有办法计算已经上传了多少,这样我就可以计算上传的百分比并创建进度条了?

EN

回答 8

Stack Overflow用户

发布于 2014-04-10 20:22:38

我只用jQuery实现了这一点:

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        percentComplete = parseInt(percentComplete * 100);
        console.log(percentComplete);

        if (percentComplete === 100) {

        }

      }
    }, false);

    return xhr;
  },
  url: posturlfile,
  type: "POST",
  data: JSON.stringify(fileuploaddata),
  contentType: "application/json",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }
});
票数 331
EN

Stack Overflow用户

发布于 2015-11-05 15:32:03

我在我的项目中使用了以下内容。你也可以试试。

ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {

    if (ajax.status) {

        if (ajax.status == 200 && (ajax.readyState == 4)){
            //To do tasks if any, when upload is completed
        }
    }
}
ajax.upload.addEventListener("progress", function (event) {

    var percent = (event.loaded / event.total) * 100;
    //**percent** variable can be used for modifying the length of your progress bar.
    console.log(percent);

});

ajax.open("POST", 'your file upload link', true);
ajax.send(formData);
//ajax.send is for uploading form data.
票数 18
EN

Stack Overflow用户

发布于 2013-12-13 03:10:13

看看这个:http://hayageek.com/docs/jquery-upload-file.php,我在网上偶然发现的。

票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15410265

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档