当前位置： 移动技术网 > IT编程>脚本编程>Ajax > 一个简单的ajax上传进度显示示例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论
本例用了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"];
}
}
?>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网