php表单javascript onSubmit不工作 - php form javascript onSubmit won't work

php form javascript onSubmit won't work

又是一个问题…HRS:-/

我的问题:

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

我想在div中显示一个gif动画进度条，并用javascript显示它。我试过了，但是当我点击提交按钮时它就是不显示…当我添加onSubmit="....返回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"/>

我将感激任何帮助…因为我是新手->请帮助我变得更好，而不是评判;-)

谢谢大家!

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

使用jQuery:

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

有时候，表单提交会禁止您在页面上转换任何JavaScript功能。为了安全起见，您还应该基于<input type="submit"> click:

而不是基于表单提交事件的功能。

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