onSubmit在php脚本的开头显示DIV

onSubmit show DIV at start of the php script

本文关键字：开头 显示 DIV 脚本 php onSubmit      更新时间：2023-09-26

我有一个简单的表单，如下所示：

<form id="uploadform" action="" method="post" enctype="multipart/form-data">
<input type="file" class="file_up" name="Filedata[]" />
<input type="submit" id="send" name="uploadenFormSend" value="Bestand(en) uploaden" class="button-pink">        
</form>

提交表单时，会在同一页面上运行php脚本。（没有JS或Jquery）我喜欢做以下事情：

当php脚本启动时，需要显示一个ID为"progress"的DIV。在php脚本的末尾，它必须隐藏DIV.

我可以用JS或jQuery做这件事吗？

我尝试以下操作：

在PHP脚本的顶部：

echo '<script>
        document.getElementById("uploadStatus").style.display = "";
    </script>';

在php脚本的末尾：

echo '<script>
        document.getElementById("uploadStatus").style.display = "none";
    </script>';

不幸的是，这不起作用。。有人能帮我吗？

使用jQuery:

$( document ).ready(function() {
  $("#uploadStatus").hide()
});

只需确保默认情况下ID可见即可。

我想您希望在不重新加载页面的情况下提交。如果我是对的，您可以使用Ajax。以下是使用jQuery的可能解决方案（尚未测试）：

<script>
$(function () {
    $('form').submit(function (e) {
        e.preventDefault(); // prevent page reload
        $('#uploadStatus').show();
        $.post(
            $(this).attr('action'), 
            $(this).serialize(),
            function () {
                $('#uploadStatus').hide();
            }
        );
    });
});
</script>

检索数据的PHP脚本必须在一个单独的文件中，例如：

<form action="path/to/submit.php" ...

http://api.jquery.com/jQuery.post/

您需要记住的最重要的一点是PHP是服务器端，javascript/JQuery是客户端。所有PHP代码都在到达浏览器之前运行。javascript/JQuery全部在您的浏览器中运行。当您使用提交按钮时，您正在向服务器发送一个新页面的请求。

话虽如此，你有两个选择：

只需在提交时显示您的进度分区：

$( document ).ready(function() {
  $('form').submit(function (e) {
    $('#uploadStatus').show();
  });
});

这将在等待服务器完成请求并返回新页面加载时显示进度条。

或者，您可以像@wared提到的那样执行ajax请求，这可能比您想要的要多，也可能不多。

无论哪种方式，您的进度div都应该从style="display:none"开始。

相关文章：