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

純粋な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

これにはjQueryを使用し、デフォルトの送信を削除してタイムアウトを追加します

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

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