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

表单的进度栏

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条回答 默认 最新

  • weixin_33682790 2020-03-17 12:57
    关注

    What about use the progress HTML5 tag to do that?

    //calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
     var pos = 0; 

    var t = setInterval(move, 75);
  
    function move() {
        if(pos >= 400) {
            clearInterval(t);
        }
        else {
            pos += 4;
            bar.value = pos/4;
        }
    }
};
    #container {
    width: 400px;
    height: 50px;
    position: relative;

}

#bar {
    width: 400px;
    height: 50px;
    position: absolute;
}

progress {
  text-align: center;
}
progress:after {
  content: attr(value)'%';
}

progress:before {
  content: 'progress ';
}
    <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <div id="container">
    <progress id="bar" value="0" max="100"></progress>
            
        </div>
       
    </body>
</html>

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？