我有一个简单的表单,如下所示:
<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"开始。