1

我目前有一个正在发布文件的表单，但是我想中断提交，以便显示“正在加载”的 gif 然后提交。这样，gif 就充当了较大文件的加载符号。我需要一种将 css 类属性从 display:none 更改为 display:all 的方法。有什么帮助吗？

我的代码：

 <html>
<head>
<title>Upload your media!</title>
<style type="text/css">
load {
display: none;

}

</style>
<script>
function validateForm()
{

var x=document.forms["mediaupload"]["title"].value;
if (x==null || x=="")
  {
  alert("Title must be filled out");
  return false;
  }

  var y=document.forms["mediaupload"]["info"].value;
if (y==null || y=="")
  {
  alert("Description must be filled out");
  return false;
  }
  var z=document.forms["mediaupload"]["file"].value;
  if (z==null || z=="")
  {
  alert("You need to select a file to upload");
  return false;
  }



}
</script>
</head>
<body>
<h1>TOOB</h1>

<form name="mediaupload" action="upload_file.php" onsubmit="return validateForm()" method="post"
enctype="multipart/form-data">
<fieldset>
<legend><h4>Upload</h4></legend>
Title:<input type="text" name="title"><br>
Description:<textarea rows="10" cols="30" name="info">Write your desiption here</textarea><br>
Anonymous:<input type="checkbox" name="anonymous"><br>
File Upload:<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>

<load><img id="loading" src="sitemedia/loading.gif" ></load>
</body>
</html>
4

3 回答 3

0

use jQuery for this, remove the default submit and add timeout

$('form').submit(function(e)) {
    e.preventDefault();
    setTimeout(function() {
        this.submit();
    }, 5000);   // in milliseconds
}
于 2013-08-03T13:58:38.360 回答
0

我能够在纯 javascript 中做到这一点。

HTML

我将提交按钮更改为：

<input type="button" onclick="loadFunc()" name="submit" value="Submit">

并添加了这个加载div：

<div id="loading" style="display:none">
<img src="sitemedia/loading.gif" />
</div>

JavaScript

function loadFunc() {
    document.getElementById("loading").style.display = "block";
    document.mediaupload.submit();
}

请参阅此处的 CodePen。

于 2013-08-03T19:17:17.147 回答
0 
$("#form_id").submit(function(e){
       e.preventDefault();

       //Code for displaying the image 
});
于 2013-08-03T14:54:04.243 回答