当提交按钮被点击时，我该如何添加一个进度光标？

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>

- Mystic Hayato

Answer 1

在您的提交按钮中添加此属性：

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

显然在Edge浏览器中，您需要添加void，例如：onclick="void function(){document.body...)

因此应该像这样：

<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

重置它。

与您的上传功能一起使用，这样您就可以在单击按钮时将其设置为等待光标，然后在上传功能完成后将其设置回来。

- theonlygusti

---

这段代码有两个问题：首先，它会抛出一个SyntaxError: function statement requires a name的错误，所以你需要像这样写：onclick="(function(){document.body.style.cursor='wait'})()" 或者 onclick="document.body.style.cursor='wait'"；其次，它只在鼠标位于BODY上时设置光标，而不是在其他元素上，甚至不是在点击的提交按钮上。 - Charon ME

Answer 2

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

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

- Yashika Garg

---

那不是光标，那是一个加载轮。 - theonlygusti

@yashika JavaScript代码必须放在.js文件中，还是可以放在<script> </script>标签中？ - Mystic Hayato

你也可以放置脚本标签。 - Yashika Garg

你可以检查元素并告诉我，你得到了什么错误吗？ - Yashika Garg

我将Javascript代码放在表单末尾的<script>标签中，在</form>标签关闭之前。 - Mystic Hayato

Answer 3

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

- arachnid