PHP文件上传进度条完整程序实现 jQuery Ajax apc
2016-04-05 11:43
1086 查看
实现效果：
准备工作：
1、参考IBM的PHP V5.2 中的新增功能，第 5 部分: 跟踪文件上传进度，以下是链接地址：http://www.ibm.com/developerworks/cn/opensource/os-php-v525/
这篇文章对php文件上传进度讲得很详细，不过，是用iframe实现的。
2、下载php_apc.dll。在网上很容易搜到php_apc.dll的下载地址。
将php_apc.dll放在ext文件夹下，比如：C:\AppServ\php5\ext。在C:\WINDOWS的php.ini文件中找到;extension=php_zip.dll这行，在这行之后添加：
extension=php_apc.dll
;apc.enabled = 1
;apc.shm_segments = 1
;apc.shm_size = 64
;apc.optimization = 0
;apc.num_files_hint = 1000
;apc.ttl = 0
;apc.gc_ttl = 3600
;apc.cache_by_default = On
;apc.slam_defense = 0
;apc.file_update_protection = 2
;apc.enable_cli = 0
;apc.stat=0
apc.rfc1867=1
apc.max_file_size = 100M
upload_max_filesize = 100M
post_max_size = 100M
以上被注释掉的内容，是另外一些对配置的设置的说法。我发现，如果这样设置，每次网页文件修改后，都必须重启服务器，才能刷新，否则，修改后，无法看到修改后的网页内容。
修改完配置，记得重启服务器。
3、因为实现提交和显示进度条用到jQuery的内容，上传文件也采用了jQuery的弹出对话框的方式，所以，要下载jQuery的核心文件和UI文件。
jQuery的核心文件在jQuery的首页上就可以下载，文件名为jquery-1.4.3.js，注意版本号，如果下载的版本号与后续程序中的不一致，记得修改程序中的文件名。
UI文件的下载地址：http://jqueryui.com/download
可以将可选组件全部勾选。下载的文件夹名jquery-ui-1.8.6.custom。在后续程序中用到的js文件和css文件全部可以在这个文件夹中找到。注意：在该文件夹的development-bundle子文件夹中，必须有jquery-1.4.3.js（或者其它版本）文件存在，否则，文件夹中的demos子文件夹中的例子程序，都无法运行。
还要下载jQuery的表单插件，下载地址：http://malsup.com/jquery/form/#download
页面组成
1、lwjUpload1.php 显示文件上传的客户端页面
2、lwjfileUp.php 处理文件上传的服务器端页面
3、getProgress.php 获得文件上传进度缓存的服务器端页面
程序实现
lwjUpload1.php 显示文件上传的客户端页面
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>李婉佳的文件上传进度条</title>
<link type="text/css" href="css/jquery.ui.all.css"rel="stylesheet" />
<link type="text/css" href="css/demos.css"rel="stylesheet" />
<script type="text/javascript"src="scripts/jquery-1.4.3.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript"src="scripts/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.widget.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.position.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.resizable.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.dialog.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.core.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.highlight.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.scale.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.blind.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.explode.js"></script>
<script type="text/javascript"src="scripts/jquery.form.js"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
input,label
{
margin-top:10px;
}
#fileUpload
{
width:20em;
height:2em;
}
a.aButton
{
font-size:1.2em;
color:black;
}
a.aButton:hover
{
color:#0066CC;
text-decoration:none;
}
</style>
<scripttype="text/javascript">
//初始化对话框，让对话框隐藏，不自动弹出，并设置对话框关闭的速度（速率）
$.fx.speeds._default= 500; //对话框显示和隐藏的速度
$(function(){
$("#dialog").dialog({
autoOpen: false,
show:'scale', //对话框显示的方式
hide:'explode'
//对话框隐藏的方式
})
});
//弹出文件上传的对话框
var uid; //为隐藏表单APC_UPLOAD_PROGRESS定义value的变量
function dialogOpen()
{
//document.getElementByIdx_x("fileUpload").value ="";//无法通过这个方式给file类型的input赋值，只读
//每次打开“文件上传”对话框时，先清空对话框中上次显示的Ajax消息、上传进度百分数和进度条
document.getElementByIdx_x("output1").innerHTML="";
document.getElementByIdx_x("test1").innerHTML="";
document.getElementByIdx_x("progressouter").style.display="none";
$("#dialog").dialog("open");
return false;
}
//设置ajaxSubmit的参数
var options = {
target:'#output1',
beforeSubmit:showResponse
//一定要设置为提交前(beforeSubmit)，不能是提交后（success）,否则无法获得文件上传的缓存
};
functionshowResponse(responseText,statusText){
//alert('状态：' + statusText+ '\n返回的内容是：\n' + responseText);
varnewId = document.getElementByIdx_x("progress_key");
//产生一个由时间戳和随机数组成的字符串，作为隐藏表单APC_UPLOAD_PROGRESS的value
var temp1 = newDate().getTime().toString();
var temp2 = Math.random().toString();
uid = temp1 + temp2;
//uid必须在每次单击“文件上传”时生成一遍，保证每个上传的文件有不同的APC_UPLOAD_PROGRESSid
//否则，传完一个文件后，再传第二个文件时，没有进度条的效果
newId.value = uid;
document.getElementByIdx_x("progressouter").style.display="block";
document.getElementByIdx_x("progressinner").style.width= "0%";
getProgress();
}
function getProgress()
{
$.ajax({
success:getStatus,
url:'getProgress.php?progress_key='+ uid,
type:'get',
dataType:'text',
cache:false //一定要加上这个条件，保证不缓存，否则，页面不会动态刷新，就没有进度条效果
});
}
functiongetStatus(responseText,statusText)
{
var t1 = document.getElementByIdx_x("test1");
t1.innerHTML = responseText.toString()+"%";
if(responseText<100)
{
document.getElementByIdx_x("progressinner").style.width= responseText+"%";
setTimeout("getProgress()",10);
}
else if(responseText>=100)
{
document.getElementByIdx_x("progressinner").style.width= "100%";
}
}
function ajaSub()
{
$('#myForm').ajaxSubmit(options);
return false;
}
</script>
</head>
<body>
<?php
//这一段用来检查apc是否可用
if (function_exists('apc_fetch')) {
echo 'it surpport apc model!';
} else {
echo "it'snot support apc model!";
}
?>
<div id="dialog"title="李婉佳的文件上传">
<formid="myForm" action="lwjfileUp.php" method="post"enctype="multipart/form-data" onsubmit="returnajaSub();">
<inputtype="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key"/>
<p><inputtype="file" id="fileUpload" name="myfile"/></p>
<p><inputtype="submit" value="文件上传"/></p>
<pid="output1"></p>
<divid="progressouter" style="width:75px; height:12px; border:1px solidgray; display:none;">
<divid="progressinner" style="position:relative; height:12px;background-color:#6699ff; width:0%; ">
</div>
</div>
<pid="test1"></p>
</form>
</div>
<a class="aButton" href="#"onclick="dialogOpen();">李婉佳的文件上传</a>
</body>
</html>
lwjfileUp.php 处理文件上传的服务器端页面
<?php
header("Content-Type:text/html;charset=utf-8");
if($_SERVER['REQUEST_METHOD']=='POST')
{
$dirName ='D:/Code/精通CSS（第2版）/'; //存放上传文件的服务器端文件夹路径
$dirName= iconv("utf-8","gb2312//IGNORE",$dirName); //转换字符编码，否则，中文路径会出错
$temp =$_FILES['myfile']['name'];
$temp =iconv("utf-8","gb2312//IGNORE",$temp);
$upfile =$dirName.time().$temp;
//$upfile =$dirName.time().$_FILES['myfile']['name'];
if(!move_uploaded_file($_FILES["myfile"]["tmp_name"],$upfile))
{
echo'不能将文件移动到指定目录';
exit;
}
$upfile =iconv("gb2312","utf-8//IGNORE",$upfile);
echo"<p>$upfile.上传成功。 Thankyou!</p>";
}
?>
getProgress.php 获得文件上传进度缓存的服务器端页面
<?php
if(isset($_GET['progress_key'])) {
$status =apc_fetch('upload_'.$_GET['progress_key']);
if($status['total'] == 0)
{
$temp = 0;
}
else
{
$temp =$status['current']/$status['total']*100;
}
echo ceil($temp);
}
?>
准备工作：
1、参考IBM的PHP V5.2 中的新增功能，第 5 部分: 跟踪文件上传进度，以下是链接地址：http://www.ibm.com/developerworks/cn/opensource/os-php-v525/
这篇文章对php文件上传进度讲得很详细，不过，是用iframe实现的。
2、下载php_apc.dll。在网上很容易搜到php_apc.dll的下载地址。
将php_apc.dll放在ext文件夹下，比如：C:\AppServ\php5\ext。在C:\WINDOWS的php.ini文件中找到;extension=php_zip.dll这行，在这行之后添加：
extension=php_apc.dll
;apc.enabled = 1
;apc.shm_segments = 1
;apc.shm_size = 64
;apc.optimization = 0
;apc.num_files_hint = 1000
;apc.ttl = 0
;apc.gc_ttl = 3600
;apc.cache_by_default = On
;apc.slam_defense = 0
;apc.file_update_protection = 2
;apc.enable_cli = 0
;apc.stat=0
apc.rfc1867=1
apc.max_file_size = 100M
upload_max_filesize = 100M
post_max_size = 100M
以上被注释掉的内容，是另外一些对配置的设置的说法。我发现，如果这样设置，每次网页文件修改后，都必须重启服务器，才能刷新，否则，修改后，无法看到修改后的网页内容。
修改完配置，记得重启服务器。
3、因为实现提交和显示进度条用到jQuery的内容，上传文件也采用了jQuery的弹出对话框的方式，所以，要下载jQuery的核心文件和UI文件。
jQuery的核心文件在jQuery的首页上就可以下载，文件名为jquery-1.4.3.js，注意版本号，如果下载的版本号与后续程序中的不一致，记得修改程序中的文件名。
UI文件的下载地址：http://jqueryui.com/download
可以将可选组件全部勾选。下载的文件夹名jquery-ui-1.8.6.custom。在后续程序中用到的js文件和css文件全部可以在这个文件夹中找到。注意：在该文件夹的development-bundle子文件夹中，必须有jquery-1.4.3.js（或者其它版本）文件存在，否则，文件夹中的demos子文件夹中的例子程序，都无法运行。
还要下载jQuery的表单插件，下载地址：http://malsup.com/jquery/form/#download
页面组成
1、lwjUpload1.php 显示文件上传的客户端页面
2、lwjfileUp.php 处理文件上传的服务器端页面
3、getProgress.php 获得文件上传进度缓存的服务器端页面
程序实现
lwjUpload1.php 显示文件上传的客户端页面
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>李婉佳的文件上传进度条</title>
<link type="text/css" href="css/jquery.ui.all.css"rel="stylesheet" />
<link type="text/css" href="css/demos.css"rel="stylesheet" />
<script type="text/javascript"src="scripts/jquery-1.4.3.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript"src="scripts/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.widget.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.position.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.resizable.js"></script>
<script type="text/javascript"src="scripts/jquery.ui.dialog.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.core.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.highlight.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.scale.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.blind.js"></script>
<script type="text/javascript"src="scripts/jquery.effects.explode.js"></script>
<script type="text/javascript"src="scripts/jquery.form.js"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
input,label
{
margin-top:10px;
}
#fileUpload
{
width:20em;
height:2em;
}
a.aButton
{
font-size:1.2em;
color:black;
}
a.aButton:hover
{
color:#0066CC;
text-decoration:none;
}
</style>
<scripttype="text/javascript">
//初始化对话框，让对话框隐藏，不自动弹出，并设置对话框关闭的速度（速率）
$.fx.speeds._default= 500; //对话框显示和隐藏的速度
$(function(){
$("#dialog").dialog({
autoOpen: false,
show:'scale', //对话框显示的方式
hide:'explode'
//对话框隐藏的方式
})
});
//弹出文件上传的对话框
var uid; //为隐藏表单APC_UPLOAD_PROGRESS定义value的变量
function dialogOpen()
{
//document.getElementByIdx_x("fileUpload").value ="";//无法通过这个方式给file类型的input赋值，只读
//每次打开“文件上传”对话框时，先清空对话框中上次显示的Ajax消息、上传进度百分数和进度条
document.getElementByIdx_x("output1").innerHTML="";
document.getElementByIdx_x("test1").innerHTML="";
document.getElementByIdx_x("progressouter").style.display="none";
$("#dialog").dialog("open");
return false;
}
//设置ajaxSubmit的参数
var options = {
target:'#output1',
beforeSubmit:showResponse
//一定要设置为提交前(beforeSubmit)，不能是提交后（success）,否则无法获得文件上传的缓存
};
functionshowResponse(responseText,statusText){
//alert('状态：' + statusText+ '\n返回的内容是：\n' + responseText);
varnewId = document.getElementByIdx_x("progress_key");
//产生一个由时间戳和随机数组成的字符串，作为隐藏表单APC_UPLOAD_PROGRESS的value
var temp1 = newDate().getTime().toString();
var temp2 = Math.random().toString();
uid = temp1 + temp2;
//uid必须在每次单击“文件上传”时生成一遍，保证每个上传的文件有不同的APC_UPLOAD_PROGRESSid
//否则，传完一个文件后，再传第二个文件时，没有进度条的效果
newId.value = uid;
document.getElementByIdx_x("progressouter").style.display="block";
document.getElementByIdx_x("progressinner").style.width= "0%";
getProgress();
}
function getProgress()
{
$.ajax({
success:getStatus,
url:'getProgress.php?progress_key='+ uid,
type:'get',
dataType:'text',
cache:false //一定要加上这个条件，保证不缓存，否则，页面不会动态刷新，就没有进度条效果
});
}
functiongetStatus(responseText,statusText)
{
var t1 = document.getElementByIdx_x("test1");
t1.innerHTML = responseText.toString()+"%";
if(responseText<100)
{
document.getElementByIdx_x("progressinner").style.width= responseText+"%";
setTimeout("getProgress()",10);
}
else if(responseText>=100)
{
document.getElementByIdx_x("progressinner").style.width= "100%";
}
}
function ajaSub()
{
$('#myForm').ajaxSubmit(options);
return false;
}
</script>
</head>
<body>
<?php
//这一段用来检查apc是否可用
if (function_exists('apc_fetch')) {
echo 'it surpport apc model!';
} else {
echo "it'snot support apc model!";
}
?>
<div id="dialog"title="李婉佳的文件上传">
<formid="myForm" action="lwjfileUp.php" method="post"enctype="multipart/form-data" onsubmit="returnajaSub();">
<inputtype="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key"/>
<p><inputtype="file" id="fileUpload" name="myfile"/></p>
<p><inputtype="submit" value="文件上传"/></p>
<pid="output1"></p>
<divid="progressouter" style="width:75px; height:12px; border:1px solidgray; display:none;">
<divid="progressinner" style="position:relative; height:12px;background-color:#6699ff; width:0%; ">
</div>
</div>
<pid="test1"></p>
</form>
</div>
<a class="aButton" href="#"onclick="dialogOpen();">李婉佳的文件上传</a>
</body>
</html>
lwjfileUp.php 处理文件上传的服务器端页面
<?php
header("Content-Type:text/html;charset=utf-8");
if($_SERVER['REQUEST_METHOD']=='POST')
{
$dirName ='D:/Code/精通CSS（第2版）/'; //存放上传文件的服务器端文件夹路径
$dirName= iconv("utf-8","gb2312//IGNORE",$dirName); //转换字符编码，否则，中文路径会出错
$temp =$_FILES['myfile']['name'];
$temp =iconv("utf-8","gb2312//IGNORE",$temp);
$upfile =$dirName.time().$temp;
//$upfile =$dirName.time().$_FILES['myfile']['name'];
if(!move_uploaded_file($_FILES["myfile"]["tmp_name"],$upfile))
{
echo'不能将文件移动到指定目录';
exit;
}
$upfile =iconv("gb2312","utf-8//IGNORE",$upfile);
echo"<p>$upfile.上传成功。 Thankyou!</p>";
}
?>
getProgress.php 获得文件上传进度缓存的服务器端页面
<?php
if(isset($_GET['progress_key'])) {
$status =apc_fetch('upload_'.$_GET['progress_key']);
if($status['total'] == 0)
{
$temp = 0;
}
else
{
$temp =$status['current']/$status['total']*100;
}
echo ceil($temp);
}
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery $(document).ready() 与window.onload的区别
- jquery-validation 使用
- 如何做到 jQuery-free？
- JQuery 获取验证上传文件大小代码
- HTML5中类jQuery选择器querySelector的使用
- 省市区选择插件jquery.cityselect.js的使用示例
- jquery实现checkbox全选/全不选
- jquery中的ajax方法参数——$.ajax()方法详解
- jquery.fn.extend与jquery.extend
- JQuery_实现二级列表联动效果
- jQuery技巧之让任何组件都支持类似DOM的事件管理
- jquery技巧之让任何组件都支持类似DOM的事件管理
- jquery js 重置表单 reset()具体实现代码
- jQuery--隐藏事件
- jQuery动画
- jQuery
- jquery无限级下拉框
- jQuery返回顶部代码组件
- jQuery技巧之让任何组件都支持类似DOM的事件管理
- 基于jquery fly插件实现加入购物车抛物线动画效果