我们收到了许多9lessons读者关于PHP教程的一些请求,他们问如何使用PHP和Jquery创建文件上传进度条。在这篇文章里,Arun Kumar Sekar 已经使用PHP的APC库开发了一些代码,获取服务器端的文件上传进度并且使用jQuery和CSS来增加进度颜色是十分简单的,让我们看一下示例。
使用PHP和jQuery打造文件上传进度条
运行这个脚本你必须安装PHP的APC拓展库(PHP5.4版本的不需要),只需要遵循以下步骤启用扩展。网页设计方面,我们还是使用之前在使用Bootstrap Css设计博客一文中提到的bootstrap CSS 库。
Window下APC库的安装
此处请阅读之前发布的一片PHP教程——windows下安装PHP的APC拓展。
在php.ini 中包含如下代码
1 | apc.rfc1867 = on (此行一定要添加) |
Linux APC 安装
点击这里查看如何在linux下安装APC。
在php.ini 中包含如下代码
1 | apc.rfc1867 = on (此行一定要添加) |
get_progress.php
这个文件从服务器确定文件上传的状态。
12 | if (isset( $_GET [ 'progress_key' ]) and ! empty ( $_GET [ 'progress_key' ])){ |
13 | $status = apc_fetch( 'upload_' . $_GET [ 'progress_key' ]); |
14 | echo $status [ 'current' ]/ $status [ 'total' ]*100; |
index.php
生成表单,使用php上传文件。你应该添加验证规则。
3 | $image_folder = "uploads/" ; |
6 | if (isset( $_POST [ 'upload_image' ])){ |
7 | if ( $_FILES [ 'userImage' ][ 'error' ] == 0 ){ |
8 | $up = move_uploaded_file( $_FILES [ 'userImage' ][ 'tmp_name' ], $image_folder . $_FILES [ 'userImage' ][ 'name' ]); |
15 | <form name= "uploadImage" id= "uploadImage" enctype= "multipart/form-data" action= "index.php?progress=<?php echo($uiq)?>" method= "post" class = "well" > |
16 | <label>Upload File</label> |
17 | <input type= "file" name= "userImage" id= "userImage" /> |
18 | <span class = "badge badge-info" style= "display:none;" >0%</span> |
19 | <input type= "submit" class = "btn btn-success" name= "upload_image" id= "upload_image" value= "UPLOAD FILE" /> |
20 | <div class = "progress" style= "display:none;" ><div class = "bar" style= "width:0%;" ></div></div> |
JavaScript 文件
这个文件的代码很简单,就是使用jQuery实现每隔几秒获取服务器上传文件的进度。
2 | <script type= "application/javascript" > |
3 | $(document).ready( function (){ |
4 | var randIDS = '<?php echo $uiq?>' ; |
6 | var hidden = $( "<input>" ); |
8 | name: "APC_UPLOAD_PROGRESS" , |
13 | $( "#uploadImage" ).prepend(hidden); |
14 | $( "#uploadImage" ).submit( function (e){ |
17 | p.attr( 'target' , 'tmpForm' ); |
20 | if ($( "#tmpForm" ).length == 0){ |
21 | var frame = $( "<iframe>" ); |
27 | }).css( 'display' , 'none' ); |
31 | $.get( "get_progress.php" , {progress_key:randIDS, rand:Math.random()}, |
33 | var uploaded = parseInt(data); |
35 | $( ".progress, .badge" ).hide(); |
36 | clearInterval(loadLoader); |
38 | else if (uploaded < 100) |
40 | $( ".progress, .badge" ).show(); |
41 | $( ".badge" ).text(uploaded+ "%" ); |
42 | var cWidth = $( ".bar" ).css( 'width' , uploaded+ "%" ); |
45 | var loader = setInterval(loadLoader,2000); |
48 | var loadLoader = function (){ |
49 | $.get( "get_progress.php" , {progress_key:randIDS, rand:Math.random()}, function (data) |
51 | var uploaded = parseInt(data); |
53 | $( ".progress, .badge" ).hide(); |
54 | parent.location.href= "index.php?success" ; |
56 | else if (uploaded < 100) |
58 | $( ".progress, .badge" ).show(); |
59 | $( ".badge" ).text(uploaded+ "%" ); |
60 | var cWidth = $( ".bar" ).css( 'width' , uploaded+ "%" ); |
我们在本地测试的时候,可能根本看不到进度条,文件就上传完成了,这是因为本地测试时带宽太大的原因。
切记要在php.ini中添加apc.rfc1867 = on ,将APC的文件上传进度功能开启。PHP版本要在5.2以上才有效。当apc.rfc1867 = on时,任何一个文件域之前包含一个字段名为APC_UPLOAD_PROGRESS的上传文件都会触发APC来自动创建一个用户缓存条目upload_key,key的值就是POST提交的APC_UPLOAD_PROGRESS值。
注意:
1, 隐藏域APC_UPLOAD_PROGRESS一定要在文件域之前,否则上传过程不会正常工作。
2, 文件上传进度的跟踪并不是线程安全的。如果之前有一个文件正在上传,此时又上传了新文件,则之前的文件上传进度的跟踪会失效。
实际上我们就是通过APC提供的文件上传进度监测配合ajax来实时获取文件的上传进度。就是这么简单。
PHP和jQuery打造文件上传进度条示例(68)
原文链接:www.9lessons.com
本文由PHP教程原创翻译,转载请著名出处!