一个简单的ajax上传进度显示示例

159 阅读 0 评论 105 点赞

我是靠谱客的博主悦耳往事，最近开发中收集的这篇文章主要介绍一个简单的ajax上传进度显示示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本例用了jquery.form.js请到演示页面查看

CSS Code

复制代码代码如下:

 
<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

复制代码代码如下:

 
<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

复制代码代码如下:

 
<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

复制代码代码如下:

 
<?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"]; 
} 
} 
?> 