php表单javascript onSubmit不起作用

Question

又是一个问题……几乎让我发疯了好几个小时：-/

我的问题：

我的网站上有一个上传表单，上传工作正常。但我想在上传时给用户一个反馈，因为这可能需要几秒钟，具体取决于文件大小。

我想过在 div 中显示一个 gif 动画进度条并用 javascript 显示它。我试过了，但是当我点击提交按钮时它不会出现......当我添加 onSubmit="....return false;"上传将不再起作用...

这是我的代码：

在头脑中：

<script type="text/javascript">
function showHide() {
var div = document.getElementById('progressBar');
if (div.style.display == 'none') {
 div.style.display = 'block';
}
else {
 div.style.display = 'none';
}
}
</script>

正文：

 <div id="progressBar" style="display:none;height:40px;width:250px;margin:0px auto;">
 <img src="img/progressbar.gif" alt="Progress Bar">
 </div> 


 <form name="photo" id="upload_big" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" onsubmit="showHide();">
 <input class="linkinput" type="file" name="image" size="20"/>
 <input type="submit" name="upload" id="uploadbutton" value="Upload image"/>

如果有任何帮助，我将不胜感激......因为我是新手 -> 请帮助我变得更好，而不是评判；-)

谢谢！

Answer 1

这是因为当提交事件触发时，浏览器已经发送了表单，会跳转到另一个页面。

Answer 2

使用jQuery:

$(function() {
   $('#upload_big').submit(function() {
      showHide();
   });
});

---

有时，表单提交会禁止您在页面上投射更多 JavaScript 功能。为了安全起见，您还应该基于<input type="submit">点击而不是表单提交事件的功能：

$(function() {
   $('input#uploadbutton').click(function(e) {
      showHide();
      e.preventDefault();
   });
});