Ajax+JavaScript实现HTML表单上传进度、速度显示及无刷新提交问题

核心问题梳理 #

• ID不匹配：JS中选取的#bar、#percent与HTML中实际的bar1、percent1不一致，导致进度条无法更新
• 表单提交逻辑错误：仅在点击提交时初始化ajaxForm，没有阻止表单默认提交行为，导致页面跳转刷新
• 缺少绑定目标：代码中绑定ajaxForm的#uploader表单不存在，AJAX上传逻辑未实际生效
• 缺少速度计算逻辑：原有代码未实现上传速度统计相关逻辑

第一步：修改HTML代码 #

首先给整个上传区域包裹正确的表单标签，确认进度条结构完整：

<!-- 新增form标签包裹整个上传区域 -->
<form id="uploader" enctype="multipart/form-data" method="post" action="你的PHP上传接口地址">
<!-- 原有上传区域代码开始 -->
<div class="tabmain">
  <!-- 原有代码不变，省略重复部分 -->
  <div class='progress' id="progress_div" style="display:none;">
    <div class='bar' id='bar' style="height:20px;background:#2196F3;width:0%"></div>
    <div class='percent' id='percent' style="text-align:center;margin-top:-20px;">0%</div>
    <div class="speed" id="upload_speed" style="text-align:right;font-size:12px;margin-top:4px;"></div>
  </div>
  <div id='output_image'></div>
<!-- 原有上传区域代码结束 -->
</form>

注意修改action属性为你实际的PHP上传接口地址。

第二步：替换原有JavaScript代码 #

<script>
// 需提前将jQuery库和jquery.form.js插件部署到本地后引入
$(document).ready(function() {
  let uploadStartTime = 0;
  $('#uploader').ajaxForm({
    beforeSubmit: function() {
      // 记录上传开始时间用于计算速度
      uploadStartTime = Date.now();
      // 显示进度条
      $("#progress_div").show();
      // 重置进度条状态
      $('#bar').width('0%');
      $('#percent').text('0%');
      $('#upload_speed').text('');
      $('#output_image').html('');
      // 禁用提交按钮防止重复提交
      $('#submitr').attr('disabled', true);
    },
    uploadProgress: function(event, position, total, percentComplete) {
      const percentVal = percentComplete + '%';
      $('#bar').width(percentVal);
      $('#percent').text(percentVal);
      // 计算上传速度
      const spendTime = (Date.now() - uploadStartTime) / 1000;
      if (spendTime > 0) {
        const speedBps = position / spendTime;
        let speedText = '';
        if (speedBps < 1024) {
          speedText = speedBps.toFixed(2) + ' B/s';
        } else if (speedBps < 1024 * 1024) {
          speedText = (speedBps / 1024).toFixed(2) + ' KB/s';
        } else {
          speedText = (speedBps / (1024 * 1024)).toFixed(2) + ' MB/s';
        }
        $('#upload_speed').text('上传速度：' + speedText);
      }
    },
    success: function(response) {
      $('#bar').width('100%');
      $('#percent').text('100%');
      $('#upload_speed').text('上传完成');
      // 展示PHP返回的下载链接
      $('#output_image').html(response);
    },
    complete: function() {
      // 恢复提交按钮
      $('#submitr').attr('disabled', false);
    },
    error: function() {
      $('#output_image').html('<p style="color:red">上传失败，请重试</p>');
      $('#submitr').attr('disabled', false);
    }
  });
});
</script>

原有的upload_image函数可以直接删除。

第三步：修改提交按钮代码 #

把原有提交按钮的onclick事件去掉，避免重复绑定逻辑：

<input type="submit" id="submitr" name="submitr" value=" {lang.DOWNLOAD_F}" />

注意事项 #

• 确保已经正确引入本地的jQuery和jquery.form.js两个依赖库
• PHP上传接口处理完成后直接返回下载链接的HTML内容即可，不需要做跳转
• 可以给progress、bar类加基础样式，保证进度条可视化展示正常

内容的提问来源于stack exchange，提问作者B Happy