如何在 html 中上传文档时添加加载符号答案

【问题标题】：How to add a loading symbol while uploading a document in html如何在 html 中上传文档时添加加载符号
【发布时间】：2021-09-07 14:34:05
【问题描述】：

我的 HTML 是：

<!DOCTYPE html>


  <script>
    $(document).ready(function() {
    $('.parent').click(function() {
      $('.sub-nav').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.hr').click(function() {
      $('.sub-nav-hr').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.employee').click(function() {
      $('.sub-nav-employee').toggleClass('visible');
      });
    });

  </script>

  <script>
    $(document).ready(function() {
    $('.kpi').click(function() {
      $('.sub-nav-kpi').toggleClass('visible');
      });
    });

  </script>

  <!-- <script>
    $(document).ready(function() {
    $('.summary').click(function() {
      $('.sub-nav-summary').toggleClass('visible');
      });
    });

  </script> -->

  
  <script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.getElementById("main_footer").style.marginLeft = "250px";
      document.getElementById("project_form").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      document.getElementById("main_footer").style.marginLeft= "0";
      document.getElementById("project_form").style.marginLeft= "0";
    }
  </script>


</head>
<body>
  
</section>

<section>
  <div class="rt-container" id="project_form" style="transition: margin-left .5s;">
    <div class="col-rt-12">
      <div class="rt-heading" style="text-align: left;">
         <h1>Upload Employee Details</h1>
       </div>

      <div class="Scriptcontent">

       <!-- Start Project Form -->
       <form class="reg-form" method="POST" enctype="multipart/form-data" id="employeeDetailsAdd" action="http://50.19.143.13:5000/hrDetailsAdd">

        <div class="field-row">
          <label class="form-label cf" for="fileupload">Details from HR</label>
          <input type="file" id="file" name="file" accept=".xlsx">
        </div>

        <div class="field-row">
          <a target="_blank" href="http://50.19.143.13:5000/static/sample_file_format/HR.xlsx"><label class="form-labe cf" for="fileupload">Download Sample Format</label></a>
        </div>

        <div class="field-row">
          <button type="submit" class="form-button" id="submit">Submit</button>
        </div>

        
          
        
      </form>

    </div>
  </div>
</div>
</section>

</body></html>

所以我需要在用户上传文件时添加一个加载栏，以向用户显示他的文件正在上传。所以有一个加载符号显示您的文件正在上传，请稍候，就像很多网站都有一个带有加载符号和文字的框，上面写着“请稍候！”。但我的服务器端语言是 python。我对此很陌生，所以如果请有人可以帮助我。谢谢。

【问题讨论】：

也许这会对你有所帮助.. stackoverflow.com/questions/15410265/…
不，我不知道为什么，但这不起作用
嗨，Riddhi-您的表单正在后端提交，根据
元素，其操作为 hrDetailsAdd。因此，一旦浏览器重定向到该后端代码并再次返回，您在页面中所做的任何事情都将被擦除。您需要做的是设置一些 javascript 来拦截它，使用 AJAX/XHR 触发表单操作本身，然后返回一些东西。查找 jQuery 的 $.post() 命令或“如何使用 jQuery 提交 AJAX 表单”等。不幸的是，我不认为堆栈溢出答案真的可以在不提供工作代码的情况下提供足够的详细信息。
您好，谢谢您，但是我尝试了很多相同的搜索，但问题是一切都可以在 PHP 中使用，我的服务器语言是 Python

标签： javascript python html css

【解决方案1】：

    <!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <script>
    $(document).ready(function() {
    $('.parent').click(function() {
      $('.sub-nav').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.hr').click(function() {
      $('.sub-nav-hr').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.employee').click(function() {
      $('.sub-nav-employee').toggleClass('visible');
      });
    });

  </script>

  <script>
    $(document).ready(function() {
    $('.kpi').click(function() {
      $('.sub-nav-kpi').toggleClass('visible');
      });
    });

  </script>

  <!-- <script>
    $(document).ready(function() {
    $('.summary').click(function() {
      $('.sub-nav-summary').toggleClass('visible');
      });
    });

  </script> -->

  
  <script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.getElementById("main_footer").style.marginLeft = "250px";
      document.getElementById("project_form").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      document.getElementById("main_footer").style.marginLeft= "0";
      document.getElementById("project_form").style.marginLeft= "0";
    }

    function submit_file() {
      $(".preloader").show();
      // $(".preloader").hide(); for hide the loader
      return false; //Hide this

    }
  </script>
<style>
.preloader {
        width: 100%;
        height: 100%;
        top: 0;
        position: fixed;
        z-index: 99999999;
        background: rgba(247, 247, 247, 0.5);
    }
    </style>

</head>
<body>
  <div class="preloader" style="display:none;">
  Loading  
  <!-- Inside preloader you can use gif images -->
</div>

</section>

<section>
  <div class="rt-container" id="project_form" style="transition: margin-left .5s;">
    <div class="col-rt-12">
      <div class="rt-heading" style="text-align: left;">
         <h1>Upload Employee Details</h1>
       </div>

      <div class="Scriptcontent">

       <!-- Start Project Form -->
       <form class="reg-form" method="POST" enctype="multipart/form-data" id="employeeDetailsAdd" action="http://50.19.143.13:5000/hrDetailsAdd">

        <div class="field-row">
          <label class="form-label cf" for="fileupload">Details from HR</label>
          <input type="file" id="file" name="file" accept=".xlsx">
        </div>

        <div class="field-row">
          <a target="_blank" href="http://50.19.143.13:5000/static/sample_file_format/HR.xlsx"><label class="form-labe cf" for="fileupload">Download Sample Format</label></a>
        </div>

        <div class="field-row">
          <button type="button" class="form-button" id="submit" onclick='submit_file()'>Submit</button>
        </div>

        
          
        
      </form>

    </div>
  </div>
</div>
</section>

</body></html>

提交时显示预加载器。文件上传后隐藏预加载器。

【讨论】：

非常感谢！但我尝试了它不起作用的代码