jquery+ajax实现异步上传文件显示进度条

下面我将详细介绍如何使用jquery+ajax实现异步上传文件并显示进度条。

1. 前置要求

在开始整个过程之前，需要先确保你已经包含了最新版的jQuery库文件和jQuery Form插件库文件。

<script src="./jquery.js"></script> <!-- jQuery库文件 -->
<script src="./jquery.form.js"></script> <!-- jQuery Form插件库文件 -->

2. HTML代码

接下来，我们需要先设计一个基本的HTML文件上传表单。

<form id="uploadForm" enctype="multipart/form-data" method="post" action="./upload.php">
  <input type="file" name="file" id="file" />
  <br /><br />
  <input type="submit" name="submit" value="上传" />
</form>

3. JQuery代码

在处理上传文件之前，我们需要先拦截默认的表单提交事件，然后通过jquery.form.js插件将表单转化为Ajax方式提交数据。

$(document).ready(function() {
  // 拦截表单默认提交事件
  $('#uploadForm').submit(function() {
    // 将表单转化为Ajax方式提交数据
    $(this).ajaxSubmit({
      dataType: 'json', // 提交数据后返回的数据类型
      beforeSubmit: function() {
        // 显示进度条
        $('#progress-bar').show();
      },
      uploadProgress: function(event, position, total, percentComplete) {
        // 更新进度条显示
        $('#progress-bar .progress-bar').css('width', percentComplete + '%');
        $('#progress-bar .progress-bar').text(percentComplete + '%');
      },
      success: function(data) {
        // 上传完成后操作
        alert('上传成功！');
      },
      error: function(xhr) {
        // 上传失败时操作
        alert('上传失败！');
      }
    });
    // 防止表单默认提交
    return false;
  });
});

4. 显示进度条

在上述代码中，我们使用了Bootstrap的进度条组件来显示上传的进度。我们需要将下列代码添加到HTML代码中来引用该组件。

<!-- Bootstrap样式文件 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- 进度条组件 -->
<div id="progress-bar" class="progress" style="display:none;">
  <div class="progress-bar progress-bar-success"></div>
</div>

示例1

下面是示例1的完整代码。点击提交按钮，上传文件时会显示进度条，上传完成后会弹出上传成功！消息。如果上传失败，则会弹出上传失败！消息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
  <!-- jQuery库文件 -->
  <script src="./jquery.js"></script>
  <!-- jQuery Form插件库文件 -->
  <script src="./jquery.form.js"></script>
  <!-- Bootstrap样式文件 -->
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 进度条组件 -->
  <div id="progress-bar" class="progress" style="display:none;">
    <div class="progress-bar progress-bar-success"></div>
  </div>

  <form id="uploadForm" enctype="multipart/form-data" method="post" action="./upload.php">
    <input type="file" name="file" id="file" />
    <br /><br />
    <input type="submit" name="submit" value="上传" />
  </form>

  <script>
    $(document).ready(function() {
      // 拦截表单默认提交事件
      $('#uploadForm').submit(function() {
        // 将表单转化为Ajax方式提交数据
        $(this).ajaxSubmit({
          dataType: 'json', // 提交数据后返回的数据类型
          beforeSubmit: function() {
            // 显示进度条
            $('#progress-bar').show();
          },
          uploadProgress: function(event, position, total, percentComplete) {
            // 更新进度条显示
            $('#progress-bar .progress-bar').css('width', percentComplete + '%');
            $('#progress-bar .progress-bar').text(percentComplete + '%');
          },
          success: function(data) {
            // 上传完成后操作
            alert('上传成功！');
          },
          error: function(xhr) {
            // 上传失败时操作
            alert('上传失败！');
          }
        });
        // 防止表单默认提交
        return false;
      });
    });
  </script>
</body>
</html>

示例2

下面是示例2的完整代码。在该示例中，我们演示了如何在上传文件的同时，将其他表单数据一起提交。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
  <!-- jQuery库文件 -->
  <script src="./jquery.js"></script>
  <!-- jQuery Form插件库文件 -->
  <script src="./jquery.form.js"></script>
  <!-- Bootstrap样式文件 -->
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 进度条组件 -->
  <div id="progress-bar" class="progress" style="display:none;">
    <div class="progress-bar progress-bar-success"></div>
  </div>

  <form id="uploadForm" enctype="multipart/form-data" method="post" action="./upload.php">
    <input type="file" name="file" id="file" />
    <br /><br />
    <input type="text" name="name" id="name" placeholder="姓名" />
    <br /><br />
    <input type="text" name="age" id="age" placeholder="年龄" />
    <br /><br />
    <input type="submit" name="submit" value="上传" />
  </form>

  <script>
    $(document).ready(function() {
      // 拦截表单默认提交事件
      $('#uploadForm').submit(function() {
        // 将表单转化为Ajax方式提交数据
        $(this).ajaxSubmit({
          dataType: 'json', // 提交数据后返回的数据类型
          beforeSubmit: function() {
            // 显示进度条
            $('#progress-bar').show();
          },
          uploadProgress: function(event, position, total, percentComplete) {
            // 更新进度条显示
            $('#progress-bar .progress-bar').css('width', percentComplete + '%');
            $('#progress-bar .progress-bar').text(percentComplete + '%');
          },
          success: function(data) {
            // 上传完成后操作
            alert('上传成功！');
          },
          error: function(xhr) {
            // 上传失败时操作
            alert('上传失败！');
          }
        });
        // 防止表单默认提交
        return false;
      });
    });
  </script>
</body>
</html>

在该示例中，我们添加了两个文本框，分别是姓名和年龄。在提交表单时，这两个文本框的内容也会一起被提交到服务端。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery+ajax实现异步上传文件显示进度条 - Python技术站

jquery+ajax实现异步上传文件显示进度条

1. 前置要求

2. HTML代码

3. JQuery代码

4. 显示进度条

示例1

示例2

相关文章