PHP利用Session实现上传进度

最新推荐文章于 2022-05-29 22:49:05 发布

风口上的猪2015

最新推荐文章于 2022-05-29 22:49:05 发布

阅读量276

点赞数

分类专栏： PHP

原文链接：https://www.cnblogs.com/cqingt/p/6676248.html

版权

PHP 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成，其实PHP配合ajax也能实现此功能。

PHP手册对于session上传进度是这么介绍的：

当 session.upload_progress.enabled INI 选项开启时，PHP 能够在每一个文件上传时监测上传进度。这个信息对上传请求自身并没有什么帮助，但在文件上传时应用可以发送一个POST请求到终端（例如通过XHR）来检查这个状态

当一个上传在处理中，同时POST一个与INI中设置的session.upload_progress.name同名变量时，上传进度可以在$_SESSION中获得。当PHP检测到这种POST请求时，它会在$_SESSION中添加一组数据, 索引是 session.upload_progress.prefix 与 session.upload_progress.name连接在一起的值。通常这些键值可以通过读取INI设置来获得，例如

<?php

$key = ini_get("session.upload_progress.prefix") . ini_get("session.upload-progress.name");

var_dump($_SESSION[$key]);

?>

通过将$_SESSION[$key]["cancel_upload"]设置为TRUE，还可以取消一个正在处理中的文件上传。当在同一个请求中上传多个文件，它仅会取消当前正在处理的文件上传和未处理的文件上传，但是不会移除那些已经完成的上传。当一个上传请求被这么取消时，$_FILES中的error将会被设置为 UPLOAD_ERR_EXTENSION。

session.upload_progress.freq 和 session.upload_progress.min_freq INI选项控制了上传进度信息应该多久被重新计算一次。通过合理设置这两个选项的值，这个功能的开销几乎可以忽略不计。

注意：为了使这个正常工作，web服务器的请求缓冲区需要禁用，否则 PHP可能仅当文件完全上传完成时才能收到文件上传请求。已知会缓冲这种大请求的程序有Nginx。

下面原理介绍：
　　当浏览器向服务器端上传一个文件时，PHP将会把此次文件上传的详细信息(如上传时间、上传进度等)存储在session当中。然后，随着上传的进行，周期性的更新session中的信息。这样，浏览器端就可以使用Ajax周期性的请求一个服务器端脚本，由该脚本返回session中的进度信息；浏览器端的Javascript即可根据这些信息显示/更新进度条了。

php.ini需配置以下选项

session.upload_progress.enabled = "1"

session.upload_progress.cleanup = "1"

session.upload_progress.prefix = "upload_progress_"

session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"

session.upload_progress.freq = "1%"

session.upload_progress.min_freq = "1"

　　其中enabled控制upload_progress功能的开启与否，默认开启；
　　cleanup 则设置当文件上传的请求提交完成后，是否清除session的相关信息，默认开启，如果需要调试$_SESSION，则应该设为Off。
　　prefix 和 name 两项用来设置进度信息在session中存储的变量名/键名。
　　freq 和 min_freq 两项用来设置服务器端对进度信息的更新频率。合理的设置这两项可以减轻服务器的负担。
　　在上传文件的表单中，需要为该次上传设置一个标识符，并在接下来的过程中使用该标识符来引用进度信息。

　　具体的，在上传表单中需要有一个隐藏的input，它的name属性为php.ini中 session.upload_progress.name 的值；它的值为一个由你自己定义的标识符。如下：
代码如下:

1	`<input` `type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="test" />`

接到文件上传的表单后，PHP会在$_SESSION变量中新建键，键名是一个将session.upload_progress.prefix的值与上面自定义的标识符连接后得到的字符串，可以这样得到：
代码如下:

$name = ini_get('session.upload_progress.name');

$key = ini_get('session.upload_progress.prefix') . $_POST[$name];

$_SESSION[$key]; // 这里就是此次文件上传的进度信息了

$_SESSION[$key]这个变量的结构是这样的：

array (

'upload_progress_test' => array (

'start_time' => 1491494993, // 开始时间

'content_length' => 1410397, // POST请求的总数据长度

'bytes_processed' => 1410397, // 已收到的数据长度

'done' => true, // 请求是否完成 true表示完成，false未完成

'files' => array (

0 => array (

'field_name' => 'file1',

'name' => 'test.jpg',

'tmp_name' => 'D:\\wamp\\tmp\\phpE181.tmp',

'error' => 0,

'done' => true,

'start_time' => 1491494993,

'bytes_processed' => 1410096,

),

);

这样，我们就可以使用其中的 content_length 和 bytes_processed 两项来得到进度百分比。
原理介绍完了，下面我们来完整的实现一个基于PHP和Javascript的文件上传进度条。

上传表单index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

<?php session_start(); ?>

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>PHP(5.4) Session 上传进度 Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="keywords" content=""/>

<meta name="description" content=""/>

<meta name="author" content="">

<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">

body{

font-size:1em;

color:#333;

font-family: "宋体", Arial, sans-serif;

}

h1, h2, h3, h4, h5, h6{

font-family: "宋体", Georgia, serif;

color:#000;

line-height:1.8em;

margin:0;

}

h1{ font-size:1.8em; }

#wrap{

margin-top:15px;

margin-bottom:50px;

background:#fff;

border-radius:5px;

box-shadow:inset 0 0 3px #000,

0 0 3px #eee;

}

#header{

border-radius:5px 5px 0 0;

box-shadow:inset 0 0 3px #000;

padding:0 15px;

color:#fff;

background: #333333;

}

#header h1{

color:#fff;

}

#article{

padding:0 15px;

}

#footer{

text-align:center;

border-top:1px solid #ccc;

border-radius:0 0 5px 5px;

}

.progress {

width: 100%;

border: 1px solid #4da8fe;

border-radius: 40px;

height: 20px;

position: relative;

}

.progress .labels {

position: relative;

text-align: center;

}

.progress .bar {

position: absolute;

left: 0;

top: 0;

background: #4D90FE;

height: 20px;

line-height:20px;

border-radius: 40px;

min-width: 20px;

}

.report-file {

display: block;

position: relative;

width: 120px;

height: 28px;

overflow: hidden;

border: 1px solid #428bca;

background: none repeat scroll 0 0 #428bca;

color: #fff;

cursor: pointer;

text-align: center;

float: left;

margin-right:5px;

}

.report-file span {

cursor: pointer;

display: block;

line-height: 28px;

}

.file-prew {

cursor: pointer;

position: absolute;

top: 0;

left:0;

width: 120px;

height: 30px;

font-size: 100px;

opacity: 0;

filter: alpha(opacity=0);

}

.container{

padding-left:0;

padding-right:0;

margin:0 auto;

}

</style>

</head>

<body>

<div id="wrap" class="container">

<div id="header">

<h1>Session上传进度 Demo</h1>

</div>

<div id="article">

<form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data" style="margin:15px 0"

target="hidden_iframe">

<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test"/>

<div class="report-file">

<span>上传文件…</span><input tabindex="3" size="3" name="file1" class="file-prew" type="file" onchange="document.getElementById('textName').value=this.value">

</div>

<input type="text" id="textName" style="height: 28px;border:1px solid #f1f1f1" />

<p>

<input type="submit" class="btn btn-default" value="上传"/>

</p>

</form>

<div id="progress" class="progress" style="margin-bottom:15px;display:none;">

<div class="bar" style="width:0%;"></div>

<div class="labels">0%</div>

</div>

</div> 

<div id="footer">

<p> </p>

</div>

</div>

<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe>

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">

function fetch_progress() {

$.get('progress.php', {'<?php echo ini_get("session.upload_progress.name"); ?>': 'test'}, function (data) {

var progress = parseInt(data);

$('#progress .labels').html(progress + '%');

$('#progress .bar').css('width', progress + '%');

if (progress < 100) {

setTimeout('fetch_progress()', 500);

} else {

$('#progress .labels').html('100%');

}

}, 'html');

}

$('#upload-form').submit(function () {

$('#progress').show();

//图片比较小，看不出进度条加载效果，初始设33%

$('#progress .labels').html('33%');

$('#progress .bar').css('width', '33%');

setTimeout('fetch_progress()', 500);

});

</script>

</body>

</html>

　　注意表单中的session.upload_progress.name隐藏项，值设置为了test。表单中仅有一个文件上传input，如果需要，你可以添加多个。
　　这里需要特别注意一下表单的target属性，这里设置指向了一个当前页面中的iframe。这一点很关键，通过设置target属性，让表单提交后的页面显示在iframe中，从而避免当前的页面跳转。因为我们还得在当前页面显示进度条呢。

上传文件upload.php

<?php

/**

* 上传文件

*/

if(is_uploaded_file($_FILES['file1']['tmp_name'])){

//unlink($_FILES['file1']['tmp_name']);

$fileName = 'pic_' . date('YmdHis') . mt_rand(10000,99999);

$ext = substr($_FILES['file1']['name'], strrpos($_FILES['file1']['name'], '.'));

move_uploaded_file($_FILES['file1']['tmp_name'], $fileName . $ext);

}

ajax获取上传进度progress.php

<?php

/**

* AJAX获取上传文件进度

*/

session_start();

$i = ini_get('session.upload_progress.name');

//session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"

$key = ini_get("session.upload_progress.prefix") . $_GET[$i];

//session.upload_progress.prefix = "upload_progress_" . 'test'

if (!empty($_SESSION[$key])) {

$current = $_SESSION[$key]["bytes_processed"]; // 已收到的数据长度

$total = $_SESSION[$key]["content_length"]; // POST请求的总数据长度

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

}else{

echo 100;

}

注意事项:
1.input标签的位置name为session.upload_progress.name的input标签一定要放在文件input <input type="file" /> 的前面。
2.通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。
3.应该通过 setTimeout() 来调用 fetch_progress()，这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点，有可能导致进度条出现'不进反退'。

风口上的猪2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP利用Session实现上传进度

实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成，其实PHP配合ajax也能实现此功能。PHP手册对于session上传进度是这么介绍的： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 当 session.upload_progress.enabled INI 选项开启时，PHP 能够在每一个文件上传时监测上传进度。这个信息
复制链接

扫一扫

专栏目录