This commit has been accessed 654 times via Git panel.
commit 495e22b5bfb061fca2db441bf711e09d728060d6
tree c99e84d0ae15d7b40169a4e6a5a1525388198c90
parent 7eccda26da0443ad80ce35763f41cc372e4c2e64
author Engels Antonio <engels@majcms.org> 1308497298 +0800
committer Engels Antonio <engels@majcms.org> 1308497298 +0800
Add upload button locking and "progress" indicator
diff --git a/css.php b/css.php
index 5d0f86b..0fb760d 100644
--- a/css.php
+++ b/css.php
@@ -117,3 +117,7 @@ a,a:link,a:visited,a:hover,a:active {
text-align: center;
font-size: 0.75em;
}
+
+.loader {
+ display: none;
+}
diff --git a/filedrop.php b/filedrop.php
index a926d29..28595e2 100644
--- a/filedrop.php
+++ b/filedrop.php
@@ -6,6 +6,8 @@ if (!isset($_SESSION['logged_uid']) or !isset($_SESSION['logged_lvl']) or !isset
exit;
}
+echo "<img src=\"images/ajax-loader.gif\" class=\"loader\">";
+
require_once("core.php");
if (isset($_FILES['filedrop_obj']) and !empty($_FILES['filedrop_obj']) and isset($_POST['filedrop_box']) and !empty($_POST['filedrop_box'])) {
@@ -45,3 +47,8 @@ if (isset($_FILES['filedrop_obj']) and !empty($_FILES['filedrop_obj']) and isset
}
?>
+
+<script>
+parent.document.getElementById('filedrop_wait').innerHTML = '';
+parent.document.filedrop_form.filedrop_submit.disabled=false;
+</script>
diff --git a/images/ajax-loader.gif b/images/ajax-loader.gif
new file mode 100644
index 0000000..e192ca8
Binary files /dev/null and b/images/ajax-loader.gif differ
diff --git a/post.php b/post.php
index 0ab9ea1..b2f4034 100644
--- a/post.php
+++ b/post.php
@@ -73,13 +73,18 @@ if (isset($_POST['new']) and !empty($_POST['new']) and is_numeric($_POST['new'])
<iframe name="filedrop" src="filedrop.php" frameborder="0" scrolling="0" width="0" height="0"></iframe>
<table border="0" cellspacing="0" cellpadding="0">
-<form enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
+<form name="filedrop_form" enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
<tr><td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size; ?>">
<input type="hidden" name="filedrop_box" value="<?php echo $filedrop_box; ?>">
<input type="file" name="filedrop_obj">
-<input type="submit" value="Upload">
+<input type="submit" name="filedrop_submit" value="Upload" onload="javascript:document.filedrop_form.filedrop_submit.disabled=false" onclick="javascript:document.filedrop_form.filedrop_submit.disabled=true;document.getElementById('filedrop_wait').innerHTML = '<img src=images/ajax-loader.gif border=0 width=16 height=16 hspace=5>';">
+</td>
+
+<td>
+<div id="filedrop_wait"></div>
</td></tr>
+
</form>
</table>
diff --git a/send.php b/send.php
index 40ce25c..bf2bf14 100644
--- a/send.php
+++ b/send.php
@@ -232,12 +232,16 @@ if (isset($_POST['msg']) and !empty($_POST['msg']) and is_numeric($_POST['msg'])
<iframe name="filedrop" src="filedrop.php" frameborder="0" scrolling="0" width="0" height="0"></iframe>
<table border="0" cellspacing="0" cellpadding="0">
-<form enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
+<form name="filedrop_form" enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
<tr><td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size; ?>">
<input type="hidden" name="filedrop_box" value="<?php echo $filedrop_box; ?>">
<input type="file" name="filedrop_obj">
-<input type="submit" value="Upload">
+<input type="submit" name="filedrop_submit" value="Upload" onload="javascript:document.filedrop_form.filedrop_submit.disabled=false" onclick="javascript:document.filedrop_form.filedrop_submit.disabled=true;document.getElementById('filedrop_wait').innerHTML = '<img src=images/ajax-loader.gif border=0 width=16 height=16 hspace=5>';">
+</td>
+
+<td>
+<div id="filedrop_wait"></div>
</td></tr>
</form>
</table>
tree c99e84d0ae15d7b40169a4e6a5a1525388198c90
parent 7eccda26da0443ad80ce35763f41cc372e4c2e64
author Engels Antonio <engels@majcms.org> 1308497298 +0800
committer Engels Antonio <engels@majcms.org> 1308497298 +0800
Add upload button locking and "progress" indicator
diff --git a/css.php b/css.php
index 5d0f86b..0fb760d 100644
--- a/css.php
+++ b/css.php
@@ -117,3 +117,7 @@ a,a:link,a:visited,a:hover,a:active {
text-align: center;
font-size: 0.75em;
}
+
+.loader {
+ display: none;
+}
diff --git a/filedrop.php b/filedrop.php
index a926d29..28595e2 100644
--- a/filedrop.php
+++ b/filedrop.php
@@ -6,6 +6,8 @@ if (!isset($_SESSION['logged_uid']) or !isset($_SESSION['logged_lvl']) or !isset
exit;
}
+echo "<img src=\"images/ajax-loader.gif\" class=\"loader\">";
+
require_once("core.php");
if (isset($_FILES['filedrop_obj']) and !empty($_FILES['filedrop_obj']) and isset($_POST['filedrop_box']) and !empty($_POST['filedrop_box'])) {
@@ -45,3 +47,8 @@ if (isset($_FILES['filedrop_obj']) and !empty($_FILES['filedrop_obj']) and isset
}
?>
+
+<script>
+parent.document.getElementById('filedrop_wait').innerHTML = '';
+parent.document.filedrop_form.filedrop_submit.disabled=false;
+</script>
diff --git a/images/ajax-loader.gif b/images/ajax-loader.gif
new file mode 100644
index 0000000..e192ca8
Binary files /dev/null and b/images/ajax-loader.gif differ
diff --git a/post.php b/post.php
index 0ab9ea1..b2f4034 100644
--- a/post.php
+++ b/post.php
@@ -73,13 +73,18 @@ if (isset($_POST['new']) and !empty($_POST['new']) and is_numeric($_POST['new'])
<iframe name="filedrop" src="filedrop.php" frameborder="0" scrolling="0" width="0" height="0"></iframe>
<table border="0" cellspacing="0" cellpadding="0">
-<form enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
+<form name="filedrop_form" enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
<tr><td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size; ?>">
<input type="hidden" name="filedrop_box" value="<?php echo $filedrop_box; ?>">
<input type="file" name="filedrop_obj">
-<input type="submit" value="Upload">
+<input type="submit" name="filedrop_submit" value="Upload" onload="javascript:document.filedrop_form.filedrop_submit.disabled=false" onclick="javascript:document.filedrop_form.filedrop_submit.disabled=true;document.getElementById('filedrop_wait').innerHTML = '<img src=images/ajax-loader.gif border=0 width=16 height=16 hspace=5>';">
+</td>
+
+<td>
+<div id="filedrop_wait"></div>
</td></tr>
+
</form>
</table>
diff --git a/send.php b/send.php
index 40ce25c..bf2bf14 100644
--- a/send.php
+++ b/send.php
@@ -232,12 +232,16 @@ if (isset($_POST['msg']) and !empty($_POST['msg']) and is_numeric($_POST['msg'])
<iframe name="filedrop" src="filedrop.php" frameborder="0" scrolling="0" width="0" height="0"></iframe>
<table border="0" cellspacing="0" cellpadding="0">
-<form enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
+<form name="filedrop_form" enctype="multipart/form-data" action="filedrop.php" method="post" target="filedrop">
<tr><td>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size; ?>">
<input type="hidden" name="filedrop_box" value="<?php echo $filedrop_box; ?>">
<input type="file" name="filedrop_obj">
-<input type="submit" value="Upload">
+<input type="submit" name="filedrop_submit" value="Upload" onload="javascript:document.filedrop_form.filedrop_submit.disabled=false" onclick="javascript:document.filedrop_form.filedrop_submit.disabled=true;document.getElementById('filedrop_wait').innerHTML = '<img src=images/ajax-loader.gif border=0 width=16 height=16 hspace=5>';">
+</td>
+
+<td>
+<div id="filedrop_wait"></div>
</td></tr>
</form>
</table>