如何在单击“提交”按钮时放置进度光标

Question

如何在我的代码中添加进度光标以通知用户在上传许多文件时单击“提交”按钮或“上传”按钮时等待？ 这是我的表格：

<form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple="multiple" accept="*">
        <input type="submit" value="Ανέβασμα Αρχείων">


    </form>

    <form action="execute.php" method="post" >
        <input type="submit" value="Εκτέλεση ελέγχου">

    </form>

Answer 1

将此属性添加到提交按钮：

onclick="function(){document.body.style.cursor='wait'}"

所以看起来应该是这样的：

<input type="submit" value="Εκτέλεση ελέγχου" onclick="function(){document.body.style.cursor='wait'}">

现在，当您想要重置光标时，请使用以下代码：

document.body.style.cursor = 'default';

基本上，

document.body.style.cursor='wait' // loading cursor

使指针看起来像正在加载，

document.body.style.cursor = 'default'; // normal cursor

重置它。

将这些与上传功能结合使用，这样你就可以点击按钮将其设置为等待光标，然后，当你的上传功能完成后，将其设置回来。

Answer 2

在提交或更新表单时，您必须向服务器发送一些请求，您可以使用jquery延迟对象来了解发送请求的状态，根据该状态，控制显示或隐藏进度游标。

Answer 3

您可以点击提交按钮加载进度光标，如下所示。

<div id="progressMessage" style="display:none; padding:5px; border:1px Solid #000">
        <div id="activityIndicator">&nbsp;</div>
        <label style="font:bold; display:block; padding:5px; text-align: centre;"
             id="progressMessageLbl">Loading...</label>
    </div>
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" accept="*">
    <input type="submit" value="Ανέβασμα Αρχείων" onclick="showProgressCursor();">
</form>

<form action="execute.php" method="post" >
    <input type="submit" value="Εκτέλεση ελέγχου" onclick="showProgressCursor();">

</form>

JavaScript代码

function showProgressCursor()
{
   $("#progressMessageLbl").html("Loading....");
   $("#progressMessage").show();
}

CSS

 #progressMessage
 {
    position:absolute;
    top:45%;
    left:25%;
    width:50%;
    z-index:3000;
 }

 #activityIndicator 
 {
   height: 32px;
   width: 32px;
   -webkit-background-size: 32px 32px;
   -o-background-size: 32px 32px;
   -moz-background-size: 32px 32px;
   background-size: 32px 32px;
   margin: 0px auto;
   background-image: url("activity_indicator.gif");
   background-color: transparent; 
}