jQuery上传文件，含进度条。

最新推荐文章于 2025-05-14 15:50:03 发布

weixin_33736048

最新推荐文章于 2025-05-14 15:50:03 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/theMaxBear/p/10997748.html

本文详细介绍了如何使用jQuery和FormData API实现文件上传功能，并在上传过程中显示进度条，包括监听文件上传进度、计算上传百分比等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    $(function () {


      $("input[name=file1]").change(function () {
        var formData = new FormData();
        formData.append("file", $("input[name=file1]")[0].files[0]);
        $.ajax({
          type: "post",
          url: "file.php",
          data: formData,
          processData: false,
          xhr: function () {
            //获取xmlhttprequest对象或者ActiveXObject 对象，jquery中封装好的。
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
              xhr.upload.addEventListener("progress", progressBar, false);
            }
            return xhr;

          },
          success: function () {},
          error: function () {
            console.log(arguments);
          }

        });
      });



      function progressBar(evt) {
        var loaded = evt.loaded; //已经上传大小情况
        var tot = evt.total; //附件总大小
        var per = Math.floor(100 * loaded / tot); //已经上传的百分比
        $(".sonValue").html(per + "%");
        $(".sonProcess").width(per + "%");
      }
    })
  </script>