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

How can i add to my code a progress cursor to inform the user to wait when he clicks the Submit button or the Upload Button when uploads many files? Here is my form:

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

<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>

3 个解决方案

#1

You can load Progress Cursor on click of submit button as below.

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

<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 Code

JavaScript代码

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

CSS

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; 
}

#2

Add this attribute to your submit button:

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

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

So it should look like:

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

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

Now, when you want to reset the cursor, use this code:

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

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

Basically,

基本上，

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

makes the pointer look like it's loading, and

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

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

resets it.

重置它。

Use these in conjunction with your uploading functions, so you could have the button onclick set it to a waiting cursor, and then, when your uploading function has finished, set it back.

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

#3

While submitting or updating the form, you must be sending some request to server, you can use jquery deferred objects to know the status of request sent, on basis of that status, control showing or hiding of your progress cursor.

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