當檔案過大,或使用者網路狀態一般,通常上傳過程需要一段時間,如果這時候讓使用者白屏等待的話,相信大部分使用者都會直接關掉應用,所以一個監控上傳進度,並即時向用戶報告的需求就被產品汪擺在了桌面上。一個高逼格的上傳進度提示,會讓你的應用程式瞬間變成被仰望的存在。
PHP在5.4之前,總是需要安裝額外的擴充功能才能監控到檔案上傳進度。而從5.4開始,引入session.upload_progress的新特性,我們只需要在php.ini開啟配置,即可透過session監控檔案上傳進度。在php.ini中。
注意:本章學習需要有session基礎和javascript和ajax基礎。
我們需要配置,注意查看和修改php.ini檔案:
##說明#session.upload_progress.enabled#是否啟用上傳進度報告(預設開啟) 1為開啟,0為關閉#session.upload_progress.cleanup是否在上傳完成後及時刪除進度資料(預設為開啟,推薦開啟)session.upload_progress.prefix[=upload_progress_ ]進度數據將存儲在_SESSION[session.upload_progress.prefix . _POST[session.upload_progress.name]]session.upload_progress.name[=PHP_SESSION_UPLOAD_PROGRESS ]如果_POST[session.upload_progress.name]沒有被設定, 則不會報告進度.session.upload_progress.freq[=1%]更新進度的頻率(已經處理過的位元組數), 也支援百分比表示'%'.session.upload_progress.min_freq[=1.0]更新進度的時間間隔(秒)#開啟了配置,我們可以透過session,來記錄一個完整的檔案上傳進度。在session中,會出現一個如下結果的陣列:
$_SESSION["upload_progress_test"] = array( //请求时间 "start_time" => 1234567890, // 上传文件总大小 "content_length" => 57343257, //已经处理的大小 "bytes_processed" => 453489, //当所有上传处理完成后为TRUE,未完成为false "done" => false, "files" => array( 0 => array( //表单中上传框的名字 "field_name" => "file1", //上传文件的名称 "name" => "test1.avi", //缓存文件,上传的文件即保存在这里 "tmp_name" => "/tmp/phpxxxxxx", //文件上传的错误信息 "error" => 0, //是否上传完成,当这个文件处理完成后会变成TRUE "done" => true, //这个文件开始处理时间 "start_time" => 1234567890, //这个文件已经处理的大小 "bytes_processed" => 57343250, ), 1 => array( "field_name" => "file2", "name" => "test2.avi", "tmp_name" => NULL, "error" => 0, "done" => false, "start_time" => 1234567899, "bytes_processed" => 54554, ), ) );
這個陣列詳細記錄了檔案上傳的進度,已經處理完的檔案狀態為true。下面,我們透過一個jQuery的AJAX實例,來學習一下檔案上傳進度的流程。
首先,在表單中,需要新增一個type=hidden 的input 標籤,標籤value 為自訂(建議使用有一定意義的值,因為這個值將會在背景使用到)
<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" /> <p><input type="file" name="file1" /></p> <p><input type="submit" value="Upload" /></p> </form> <div id="progress" class="progress" style="margin-bottom:15px;display:none;"> <div class="label">0%</div> </div>
這裡,新增了一個ID為progress的div,作為展示上傳進度的容器。我們透過js的setTimeout(),定時執行ajax來取得檔案上傳進度,後台檔案傳回檔案上傳的進度百分比。
<script src="../jquery/1.8.2/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 .label').html(progress + '%'); if(progress < 100){ setTimeout('fetch_progress()', 100); //当上传进度小于100%时,显示上传百分比 }else{ $('#progress .label').html('完成!'); //当上传进度等于100%时,显示上传完成 } }, 'html'); } $('#upload-form').submit(function(){ $('#progress').show(); setTimeout('fetch_progress()', 100);//每0.1秒执行一次fetch_progress(),查询文件上传进度 }); </script>
上面這段程式碼,就是透過JQ的ajax,每0.1秒回傳一次檔案上傳進度。並把進度百分比在div 標籤中顯示。
後台程式碼,需要分成兩個部分,upload.php處理上傳檔案。 progress.php 取得session中的上傳進度,並傳回進度百分比。
這裡文件上傳就不再贅述,詳細步驟參考上文,upload.php:
<?php if(is_uploaded_file($_FILES['file1']['tmp_name'])){ //判断是否是上传文件 //unlink($_FILES['file1']['tmp_name']); move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}"); //将缓存文件移动到指定位置 } ?>
主要關注progress.php:
<?php /* 开启session。请注意在session_start()之前,请不要有想浏览器输出内容的动作,否则可能引起错误。 */ session_start(); //ini_get()获取php.ini中环境变量的值 $i = ini_get('session.upload_progress.name'); //ajax中我们使用的是get方法,变量名称为ini文件中定义的前缀 拼接 传过来的参数 $key = ini_get("session.upload_progress.prefix") . $_GET[$i]; //判断 SESSION 中是否有上传文件的信息 if (!empty($_SESSION[$key])) { //已上传大小 $current = $_SESSION[$key]["bytes_processed"]; //文件总大小 $total = $_SESSION[$key]["content_length"]; //向 ajax 返回当前的上传进度百分比。 echo $current < $total ? ceil($current / $total * 100) : 100; }else{ echo 100; } ?>
到這裡,檔案進度的程式碼就已經完成了,配合前端,我們就可以做一個酷炫的檔案上傳功能啦!
#設定項 | |
---|---|