使用PHP和jQuery打造文件上传进度条

来源：互联网发布：斑马gk888t mac驱动编辑：程序博客网时间：2024/06/05 02:28

我们收到了许多9lessons读者关于PHP教程的一些请求，他们问如何使用PHP和Jquery创建文件上传进度条。在这篇文章里，Arun Kumar Sekar 已经使用PHP的APC库开发了一些代码，获取服务器端的文件上传进度并且使用jQuery和CSS来增加进度颜色是十分简单的，让我们看一下示例。

运行这个脚本你必须安装PHP的APC拓展库（PHP5.4版本的不需要），只需要遵循以下步骤启用扩展。网页设计方面，我们还是使用之前在使用Bootstrap Css设计博客一文中提到的bootstrap CSS 库。

Window下APC库的安装

此处请阅读之前发布的一片PHP教程——windows下安装PHP的APC拓展。

在php.ini 中包含如下代码

1apc.rfc1867 = on （此行一定要添加）

Linux APC 安装

点击这里查看如何在linux下安装APC。

在php.ini 中包含如下代码

1apc.rfc1867 = on （此行一定要添加）

get_progress.php

这个文件从服务器确定文件上传的状态。

1<?php
2session_start();
3error_reporting(0);
4/*
5// For PHP 5.4 users
6$progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name
7$current = $_SESSION[$progress_key]["bytes_processed"];
8$total = $_SESSION[$progress_key]["content_length"];
9echo $current < $total ? ceil($current / $total * 100) : 100;
10*/
11// For PHP 5.2+ php_apc.dll or php_apc.so holder
12if(isset($_GET['progress_key'])and !empty($_GET['progress_key'])){
13 $status= apc_fetch('upload_'.$_GET['progress_key']);
14    echo$status['current']/$status['total']*100;
15 exit;
16}
17?>

index.php

生成表单，使用php上传文件。你应该添加验证规则。

1<?php
2$uiq = uniqid();
3$image_folder = "uploads/";
4$uploaded = false;
5 
6if(isset($_POST['upload_image'])){
7if($_FILES['userImage']['error'] == 0 ){
8$up = move_uploaded_file($_FILES['userImage']['tmp_name'],$image_folder.$_FILES['userImage']['name']);
9if($up){
10$uploaded = true;
11}
12}
13}
14?>
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;"><divclass="bar"style="width:0%;"></div></div>
21</form>

JavaScript 文件

这个文件的代码很简单，就是使用jQuery实现每隔几秒获取服务器上传文件的进度。

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
2<script type="application/javascript">
3$(document).ready(function(){
4var randIDS ='<?php echo $uiq?>';
5// Add Hidden Field
6var hidden = $("<input>");
7hidden.attr({
8name:"APC_UPLOAD_PROGRESS",
9id:"progress_key",
10type:"hidden",
11value:randIDS
12});
13$("#uploadImage").prepend(hidden);
14$("#uploadImage").submit(function(e){
15 
16var p = $(this);
17p.attr('target','tmpForm');
18 
19// creating iframe
20if($("#tmpForm").length == 0){
21var frame = $("<iframe>");
22frame.attr({
23name:'tmpForm',
24id:'tmpForm',
25action:'about:blank',
26border:0
27}).css('display','none');
28p.after(frame);
29}
30// Start file upload
31$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
32function(data){
33var uploaded = parseInt(data);
34if(uploaded == 100){
35$(".progress, .badge").hide();
36clearInterval(loadLoader);
37}
38else if(uploaded < 100)
39{
40$(".progress, .badge").show();
41$(".badge").text(uploaded+"%");
42var cWidth = $(".bar").css('width', uploaded+"%");
43}
44if(uploaded < 100)
45var loader = setInterval(loadLoader,2000);
46});
47 
48var loadLoader =function(){
49$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},function(data)
50{
51var uploaded = parseInt(data);
52if(uploaded == 100){
53$(".progress, .badge").hide();
54parent.location.href="index.php?success";
55}
56else if(uploaded < 100)
57{
58$(".progress, .badge").show();
59$(".badge").text(uploaded+"%");
60var cWidth = $(".bar").css('width', uploaded+"%");
61}
62});
63}
64});});
65</script>

我们在本地测试的时候，可能根本看不到进度条，文件就上传完成了，这是因为本地测试时带宽太大的原因。

切记要在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教程原创翻译，转载请著名出处！