function imageManager(){
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file', files);
$.ajax({
type:"POST",
url:"http://127.0.0.1/ajax/do-item.ajax.php",
data: fd,
contentType: false,
processData: false,
beforeSend:function(){
$("#ajax-file").html("Loading...");
},
success:function(data){
$("#ajax-file").html(decodeURI(data));
}
});
}
<?php
var_dump($_FILES);
?>
setInterval
<!DOCTYPE html>
<html>
<head>
<title>Jquery setinterval stop after sometime</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type='text/javascript'>
$.ajaxSetup({ cache: false })
</script>
</head>
<body>
<input type="button" value="Start count!" onclick="startTimer()">
<input type="button" value="Stop count!" onclick="stopTimer()">
<br/>
<div id="countdown_text">Placeholding text</div>
<script type="text/javascript">
var timer = null,
value = 0;
function startTimer(){
if (timer !== null) return;
timer = setInterval(function () {
document.getElementById('countdown_text').innerHTML = ++value;
}, 1000);
}
function stopTimer(){
clearInterval(timer);
timer = null
}
</script>
</body>
</html>
setTimeout
<!DOCTYPE html>
<html>
<body>
<title>Jquery setinterval stop after sometime</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type='text/javascript'>
$.ajaxSetup({ cache: false })
</script>
<button onclick="startCount()">start</button>
<button onclick="stopCount()">stop</button>
<div id="countdown_text">Placeholding text</div>
<script>
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
document.getElementById('countdown_text').innerHTML = c;
c = c + 1;
t = setTimeout(
function(){
timedCount()
}, 1000
);
}
function startCount() {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
timer_is_on = 0;
}
</script>
</body>
</html>
Remark :
setTimeout (無限loop)
setTimeout (僅行一次)

Reference : http://wixel.github.io/jquery-popdown/
Remark :
// OnLoad JavaScript
<script type="text/javascript">
$(document).ready(function(){
$('.popdown').popdown();
$(".popdown").trigger('click');
});
</script>
index.php
<script src="loading.js" type="text/javascript"></script>
<link media="screen" rel="stylesheet" type="text/css" href="slyte.css" />
<div id='loading' style='display: none;'>
Loading...
</div>
<a onclick="activate_ajax_loading('content_1.html')" href="#content_1">content_1</a> |
<a onclick="activate_ajax_loading('content_2.html')" href="#content_2">content_2</a>
slyte.css
<style>
#container { line-height: 20px; width: 500px; height: 500px; margin: 20px 0; padding: 10px; border: 1px solid #999; }
// Loding Color is Blue
#loading { MARGIN-LEFT: 90%; position: absolute; top: 0; left: 0; color: white; background-color: blue; padding: 5px 10px; font: 12px Arial; }
// Loading Color is red
#loading { position: absolute; top: 0; left: 0; color: white; background-color: red; padding: 5px 10px; font: 12px Arial; }
</style>
Loading.js
<script type='text/javascript'>
activate_ajax_loading = function(url) {
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
$("#content").load(url);
}
</script>
<strong>content_1.html</strong>
<pre class="brush:php">content1.html</pre>
<strong>content_2.html</strong>
<pre class="brush:php">content2.html</pre>
<script type='text/javascript'>
jQuery.ajaxSetup ({
cache:false;
})
</script>