weixin_33688840 2020-03-17 10:37 采纳率: 0%
浏览 14

表单的进度栏

I'm trying to create a progress bar for my form but it still doesn't work. After loading the form, I would like my progress bar to move from 0 percent to 100 and finish loading. I still can't see why my progress bar is not working.

My code looks like this

<form method="POST" enctype="multipart/form-data" name="newProductForm" id="newProductForm">
  <input type="file" name="img" class="custom-input-file" accept=".jpg, .jpeg" required id="id_img">
  <input type="text" name="category" class="form-control form-control-emphasized" id="category" placeholder="Wpisz kategorie..." maxlength="200" required>

  <div class="progress">
    <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      0%
    </div>
  </div>

  <button type="button" onClick="submitFunction();" class="btn btn-block btn-primary" id="buttonSubmitProduct">
    <span style="display:block;" id="buttonText">
      Submit
    </span>
    <span style="display:none;" id="buttonSipner">
      Loading......
    </span>
  </button>

</form>

My AJAX and JS:

<script>
function submitFunction() {
  document.getElementById('buttonSubmitProduct').disabled = true;
  document.getElementById('buttonText').style.display = 'none';
  document.getElementById('buttonSipner').style.display = 'block';
  document.getElementById('newProductForm').submit();
}

$(document).ready(function() {

  $('newProductForm').on('submit', function(event) {

    event.preventDefault();

    var formData = new FormData($('newProductForm')[0]);

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

        xhr.upload.addEventListener('progress', function(e) {

          if (e.lengthComputable) {

            console.log('Bytes Loaded: ' + e.loaded);
            console.log('Total Size: ' + e.total);
            console.log('Percentage Uploaded: ' + (e.loaded / e.total))

            var percent = Math.round((e.loaded / e.total) * 100);

            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

          }

        });

        return xhr;
      },
      type: 'POST',
      url: '',
      data: formData,
      processData: false,
      contentType: false,
      success: function() {
        location.replace("/?okey=smile");
      }
    });

  });

});
</script>

I don't see any errors in the console. Why is my code not working?

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥20 OpenCV-Python简单轮廓寻找
      • ¥20 使用matlab进行含参数的最优化求解及数值模拟
      • ¥20 MATLAB找出一维变量中的局部极大值和局部极小值,并进行运算
      • ¥15 有Chang求三维杆单元几何非线性分析matlab代码
      • ¥50 使用unity easyar录屏功能。录屏视频整体色调很暗
      • ¥50 pyinstaller 打包问题
      • ¥15 无法使用cnssc调取网页数据
      • ¥15 Pycharm安装en_core_web_sm失败出现Could not find a version that satisfies the requirement spacy报错
      • ¥15 Python社区划分
      • ¥15 游戏Aces.exe启动问题,想请教有没有友友可以看看如何解决~