一个简单的ajax上传进度显示示例
更新时间：2014年02月21日 16:27:52 作者：
这篇文章主要介绍了一个简单的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"];
}
}
?>
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和JSP实现的基于WEB的文件上传的进度控制代码
- AJAX 进度条实现代码
- ajax+php打造进度条 readyState各状态
- ajax+php打造进度条代码[readyState各状态说明]
- 让ajax更加友好的实现方法(实时显示后台处理进度。)
- ajax提交加载进度条示例代码
- php+ajax实现带进度条的大数据排队导出思路以及源码
- jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
- jsp+ajax发送GET请求的方法
- jquery+ajax实现跨域请求的方法
- asp.net+ajax的Post请求实例
- 服务端配置实现AJAX跨域请求
- 解决ajax跨域请求数据cookie丢失问题
- django通过ajax发起请求返回JSON格式数据的方法
- Ajax在请求过程中显示进度的简单实现
相关文章
这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法，感兴趣的小伙伴们可以参考一下2016-01-01
AJAX 是一种用于创建快速动态网页的技术。接下来通过本文给大家介绍Ajax实现页面自动刷新实例解析，感兴趣的朋友一起看看吧2016-04-04
最近在使用JQuery的ajax方法时，需要返回的数据为json数据，在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据。下面小编给大家介绍下在$.ajax方法中应该是如何来处理的2016-10-10
这篇文章主要为大家详细介绍了ajax三级联动下拉菜单的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。接下来通过本文给大家介绍ajax一些常用方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-07-07
jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法
这篇文章主要介绍了jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法的相关资料,需要的朋友可以参考下2015-11-11
Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式2012-08-08
下面是一些常见ajax的一些属性与方法，大家一定要熟练掌握。2009-03-03
这篇文章主要介绍了Ajax实现无刷新分页实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
Ajax 程序开发中常见问题，利用大家快点的找到问题所在，快速解决问题。2009-08-08
最新评论