파일이 너무 크거나 사용자의 네트워크 상태가 평균적인 경우 일반적으로 업로드 프로세스에 시간이 걸리며 이때 빈 화면이 표시되면 대부분의 사용자는 간단히 업로드를 닫을 것입니다. 따라서 업로드 진행 상황을 모니터링해야 하므로 사용자에게 실시간으로 보고해야 할 필요성이 Product Wang에 의해 제기되었습니다. 고품질 업로드 진행 메시지는 앱을 즉시 돋보이게 만듭니다.
PHP 5.4 이전에는 파일 업로드 진행 상황을 모니터링하려면 항상 추가 확장 기능을 설치해야 했습니다. 5.4부터 session.upload_progress의 새로운 기능이 도입되었습니다. 세션을 통해 파일 업로드 진행 상황을 모니터링하려면 php.ini에서 구성을 활성화하기만 하면 됩니다. php.ini에서.
참고: 이 장을 학습하려면 세션과 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["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으로 입력 태그를 추가해야 하며 태그 값은 custom입니다(이 값은 백그라운드에서 사용되므로 의미 있는 값을 사용하는 것이 좋습니다).
<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가 포함된 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는 세션의 업로드 진행률을 가져오고 진행률을 반환합니다.
여기에서는 파일 업로드에 대해 자세히 설명하지 않습니다. 자세한 단계는 위의 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; } ?>
여기서 파일 진행 코드가 완성되었습니다. 프론트엔드를 이용하면 멋진 파일 업로드 기능을 만들 수 있습니다!