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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一个简单的ajax上传进度显示示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1853字，纯文字阅读大概需要3分钟。

内容图文

本例用了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"]; 
} 
} 
?> 

            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的一个简单的ajax上传进度显示示例全部内容，希望文章能够帮你解决一个简单的ajax上传进度显示示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---