PHP文件上传进度:使用 Session 的 upload_progress

1. 设置文件上传大小限制,修改如下:
upload_max_filesize = 50m; 允许上传文件大小的最大值。默认为2M
post_max_size = 50m; 指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值。默认为8M
max_execution_time = 600; 每个PHP页面运行的最大时间值(秒),默认30秒
max_input_time = 600; 每个PHP页面接收数据所需的最大时间,默认60秒
memory_limit = 128m; 每个PHP页面所吃掉的最大内存,默认8M

2. 设置 php.ini 中的 upload_progress
session.upload_progress.enabled = On
session.upload_progress.cleanup = On
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"
session.lazy_write = On

 

<?php
session_start();
$_SESSION['abc'] = "abc";
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="./new_upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="hidden" name='<?php echo ini_get("session.upload_progress.name"); ?>' value="123" id="u"/>
        <button type="button" class="a1">提交</button>
    </form>
    <script src="http://127.0.0.1:8081/static/js/axios.min.js"></script>

    <script>
    document.querySelector(".a1").addEventListener("click",function(){
        let fileInput = document.querySelector("input[name='file']");
        let u = document.querySelector('#u');
        console.log(u.getAttribute('name'));
        var fd = new FormData();
        fd.append(u.getAttribute('name'), u.value);
        fd.append("file", fileInput.files[0]);

        var t = setInterval(check, 100);

        axios({
        method: 'post',
            url: './new_upload.php',
            data: fd,
            headers: { 'content-type': 'multipart/form-data' },
        }).then(function (response) {
            console.log(response.data);
            clearInterval(t);
        });
        
    });
    
    var check = function(){
        axios.defaults.headers['X-Requested-With']  = "XMLHttpRequest";
        axios.defaults.headers['Content-Type']      = 'application/x-www-form-urlencoded';
        axios({
			method: 'get',
			url: './progress.php',
			responseType: 'json'
		})
		.then(function (response) {
			console.log(response.data);
		})
		.catch(function (error) {
			console.log(error);
		});
    };
    
    </script>
</body>
</html>

 

<?php
session_start();

if(is_uploaded_file($_FILES['file']['tmp_name'])){
    move_uploaded_file($_FILES['file']['tmp_name'], "./{$_FILES['file']['name']}"); 
}

 

session_start();

$i = ini_get('session.upload_progress.name');
$key = ini_get("session.upload_progress.prefix") . "123";    
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;            
}

 

特别注意:session.upload_progress.name 表单的位置一定要在 input[type='file'] 的前面,否则无法获取相关session。formData中也是如此,我在此坑蹲了许久。

 

修改时间 2019-06-25

真诚赞赏,手留余香
赞赏
随机推荐
Nginx 代理 Node.js 静态文件比较大无法正常显示,关键词 proxy_temp Permission denied
设计的四个基本原则
JavaScript 正则表达式 API
Nodejs连接MySQL
nodejs npm常用命令
JavaScript 链表
HTML5播放HLS流(.m3u8文件) Apache 跨域设置
vue-router 页面跳转后如何记录返回后的位置
20170115 数位板 起步
什么是 Dao、Service、Controller、Util 和 Model ?