PHP file upload progress processing

When the file is too large, or the user's network status is average, the upload process usually takes a while. If the user is left waiting with a blank screen at this time, I believe most users will directly close the application, so one should monitor the upload progress. The need to report to users in real time was put on the table by Product Wang. A high-quality upload progress prompt will instantly make your app look up to.

Before PHP 5.4, you always needed to install additional extensions to monitor the file upload progress. Starting from 5.4, the new feature of session.upload_progress is introduced. We only need to enable the configuration in php.ini to monitor the file upload progress through the session. in php.ini.

Note: To study this chapter, you need to have a basic foundation in session, javascript and ajax.

We need to configure, pay attention to view and modify the php.ini file:

##session.upload_progress.name[=PHP_SESSION_UPLOAD_PROGRESS ]If _POST[session.upload_progress.name] is not set, no progress will be reported.##session.upload_progress.freq[=1%]session.upload_progress.min_freq[=1.0]

With the configuration enabled, we can record a complete file upload progress through session. In the session, an array with the following results will appear:

$_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,
      ),
     )
    );

This array records the progress of file upload in detail, and the status of the files that have been processed is true. Next, we use a jQuery AJAX example to learn the file upload progress process.

First, in the form, you need to add an input tag with type=hidden, and the tag value is customized (it is recommended to use a meaningful value, because this value will be used in the background)

<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>

Here, a div with an ID of progress is added as a container to display the upload progress. We use js's setTimeout() to execute ajax regularly to obtain the file upload progress, and the background file returns the progress percentage of the file upload.

<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>

The above code returns the file upload progress every 0.1 seconds through JQ's ajax. And display the progress percentage in the div tag.

The background code needs to be divided into two parts. upload.php handles uploading files. progress.php gets the upload progress in the session and returns the progress percentage.

I won’t go into details about file upload here. Please refer to the above for detailed steps. 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']}");     //将缓存文件移动到指定位置
}
?>

Mainly focus on 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;                                                       
}
?>

Here, file progress The code has been completed. With the front-end, we can create a cool file upload function!

Continuing Learning

new file

<?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; } ?>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

Configuration item	Description
session.upload_progress.enabled	Whether to enable the upload progress report (default enabled) 1 is on, 0 is off
session.upload_progress.cleanup	Whether to delete the progress data in time after the upload is completed (enabled by default, recommended to be enabled)
session.upload_progress.prefix[=upload_progress_ ]	Progress data will be stored in _SESSION[session.upload_progress.prefix . _POST[session.upload_progress.name]]

The frequency of updating progress (number of bytes processed), also supports percentage representation of '%'.
Time interval for updating progress (second level)

PHP file upload progress processing

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]