Question

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

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

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

Answer 1

使用jQuery：

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

默认情况下，请确保您的ID可见。

Answer 2

我想你想在不重新加载页面的情况下提交。如果我是对的，你可以使用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/

Answer 3

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

据说你有两个选择：

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

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

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

或者你可以像@wared所提到的那样做一个ajax请求，这可能会或者可能不会超出你想要的范围。

无论哪种方式，你的进度div都应该以style =“display：none”开头。

onSubmit在php脚本开始时显示DIV

3 个答案: