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"/>

我很感激任何帮助...因为我是新手 - ＆gt;请帮助我变得更好而不是评判; - ）

谢天谢地！

Answer 1

使用jQuery：

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

有时，表单提交会禁止您在页面上再次强制使用JavaScript功能。为了安全起见，您还应该将功能基于表单提交事件，而不是基于<input type="submit">点击：

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

Answer 2

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

php表单javascript onSubmit赢了

2 个答案: