使用PHP和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

2	session_start();

3	error_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"];

9	echo $current < $total ? ceil($current / $total * 100) : 100;

10

*/

11	// For PHP 5.2+ php_apc.dll or php_apc.so holder

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;

15

exit;

16

}

17

?>

index.php

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

1

<?php

2	$uiq = uniqid();

3	$image_folder = "uploads/";

4	$uploaded = false;

5

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']);

9

if($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(){

4	var randIDS = '<?php echo $uiq?>';

5	// Add Hidden Field

6	var hidden = $("<input>");

7	hidden.attr({

8	name:"APC_UPLOAD_PROGRESS",

9	id:"progress_key",

10	type:"hidden",

11	value:randIDS

12

});

13	$("#uploadImage").prepend(hidden);

14	$("#uploadImage").submit(function(e){

15

16	var p = $(this);

17	p.attr('target','tmpForm');

18

19	// creating iframe

20	if($("#tmpForm").length == 0){

21	var frame = $("<iframe>");

22	frame.attr({

23	name:'tmpForm',

24	id:'tmpForm',

25	action:'about:blank',

26

border:0

27	}).css('display','none');

28	p.after(frame);

29

}

30	// Start file upload

31	$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},

32	function(data){

33	var uploaded = parseInt(data);

34	if(uploaded == 100){

35	$(".progress, .badge").hide();

36	clearInterval(loadLoader);

37

}

38	else if(uploaded < 100)

39

{

40	$(".progress, .badge").show();

41	$(".badge").text(uploaded+"%");

42	var cWidth = $(".bar").css('width', uploaded+"%");

43

}

44	if(uploaded < 100)

45	var loader = setInterval(loadLoader,2000);

46

});

47

48	var loadLoader = function(){

49	$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)

50

{

51	var uploaded = parseInt(data);

52	if(uploaded == 100){

53	$(".progress, .badge").hide();

54	parent.location.href="index.php?success";

55

}

56	else if(uploaded < 100)

57

{

58	$(".progress, .badge").show();

59	$(".badge").text(uploaded+"%");

60	var 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教程原创翻译，转载请著名出处！