一個簡單的ajax上傳進(jìn)度顯示示例

更新時間：2014年02月21日 16:27:52 作者：

這篇文章主要介紹了一個簡單的ajax上傳進(jìn)度顯示示例,需要的朋友可以參考下

本例用了jquery.form.js請到演示頁面查看

CSS Code

復(fù)制代碼代碼如下:

 
<style> 
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } 
#percent { position:absolute; display:inline-block; top:3px; left:48%; } 
</style> 

XML/HTML Code

復(fù)制代碼代碼如下:

 
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> 
<input type="file" size="60" name="myfile"> 
<input type="submit" value="Ajax File Upload"> 
</form> 
<div id="progress"> 
<div id="bar"></div> 
<div id="percent">0%</div > 
</div> 
<div id="message"></div> 

JavaScript Code

復(fù)制代碼代碼如下:

 
<script> 
$(document).ready(function() 
{ 
var options = { 
beforeSend: function() 
{ 
$("#progress").show(); 
//clear everything 
$("#bar").width('0%'); 
$("#message").html(""); 
$("#percent").html("0%"); 
}, 
uploadProgress: function(event, position, total, percentComplete) 
{ 
$("#bar").width(percentComplete+'%'); 
$("#percent").html(percentComplete+'%'); 
}, 
success: function() 
{ 
$("#bar").width('100%'); 
$("#percent").html('100%'); 
}, 
complete: function(response) 
{ 
$("#message").html("<font color='green'>"+response.responseText+"</font>"); 
}, 
error: function() 
{ 
$("#message").html("<font color='red'> ERROR: unable to upload files</font>"); 
} 
}; 
$("#myForm").ajaxForm(options); 
}); 
</script> 

upload.php

復(fù)制代碼代碼如下:

 
<?php 
$output_dir = "../upload/"; 
if(isset($_FILES["myfile"])) 
{ 
//Filter the file types , if you want. 
if ($_FILES["myfile"]["error"] > 0) 
{ 
echo "Error: " . $_FILES["file"]["error"] . "<br>"; 
} 
else 
{ 
//move the uploaded file to uploads folder; 
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]); 
echo "Uploaded File :".$_FILES["myfile"]["name"]; 
} 
} 
?> 