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

最新推荐文章于 2023-03-06 13:57:52 发布

翻译最新推荐文章于 2023-03-06 13:57:52 发布 · 942 阅读

文章标签：

#php #jquery #upload #function #image #session

PHP学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用PHP和jQuery实现文件上传进度条。通过启用APC拓展库并利用jQuery定时请求服务器状态，可以轻松地监控文件上传进度。

我们收到了许多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

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

 
   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;"><div class="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来实时获取文件的上传进度。就是这么简单。