Article Detail

php上传显示进度

基于session.upload_progress 的文件上传进度显示用PHP Session和Javascript实现文件上传进度条 php上传文件并显示上...

PHP 阅读 75.8万 6 分钟阅读 2018-03-26 12:00

基于session.upload_progress 的文件上传进度显示
用PHP Session和Javascript实现文件上传进度条
php上传文件并显示上传进度的方法

undefined index: php session upload_progress
Undefined index: PHP_SESSION_UPLOAD_PROGRESS
屏蔽警告提醒

error_reporting(0);

开启session.upload_progress
修改php.ini文件，开启session.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"

修改php上传文件限制

upload_max_filesize = 500M; //上传文件的最大值，还可以调更大
post_max_size = 500M;       //post方式传递过来数据最大值，还可以调更大
max_execution_time = 1800;  //页面最大执行时间，已经设置为最大值
max_input_time = 1800;  //解析传入数据最大执行时间，已经设置为最大值 
memory_limit = 128M;    //每个页面消耗的最大内存，已经设置为最大值

上传表单
注意别忘了在最开始加上session_start();

input标签的位置
name为session.upload_progress.name的input标签一定要放在文件input <input type="file" /> 的前面

<form action="file.php" class="ffurr" method="POST" id="upprrsss" name="upprrsss" enctype="multipart/form-data" target="hidden_iframe">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" />
<p class="pb10">
<label for="file" style="font-size: 14px;"><i class="fi-photo"></i>请选择上传作品图片:</label>
<input type="file" name="file" id="file" /> </p>

处理上传的文件

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

Ajax获取进度信息
建立一个 progress.php 文件，用来读取session中的进度信息

<?php
error_reporting(0);
session_start();

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

$key = ini_get('session.upload_progress.prefix') . $_GET[$i];
//print_r($key);exit;
if (isset($_SESSION[$key])) {
        $current = $_SESSION[$key]["bytes_processed"];
        $total = $_SESSION[$key]["content_length"];
        echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
        echo 100;
}

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 + '%');
                $('#progress .label').css('width', progress + '%');
                //$('#progress .bar').css('width', progress + '%');

                if(progress < 100){
                        setTimeout('fetch_progress()', 100);
                }else{
				$('#zesscc').hide();
            $('#progress .label').html('上传完成!');
			
			setTimeout(function(){
				location.href = '/sybyzt.php';
			}, 1500);
			
        }
        }, 'html');
}

/*$('#upprrsss').submit(function(){
		alert(321);
        $('#progress').show();
        setTimeout('fetch_progress()', 100);
});*/

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

<div id="progress" class="progress" style="margin-bottom:15px;display:none;height: auto;">
        <!--<div class="bar" style="width:0%;"></div>-->
        <div class="label" style="width:0%;">0%</div>
</div>

通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除

setTimeout vs. setInterval
应该通过 setTimeout() 来调用 fetch_progress()，这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点，有可能导致进度条出现'不进反退'

php里提供一个获取php.ini里的变量值的函数：ini_get()

参考
http://www.jb51.net/article/56305.htm

Comments 评论区

广西河池市金城江区 2018-04-08 11:02

mysql like 多个值

MySQL数据库一个字段对应多个值得模糊查询

当一个字段想模糊查询出多个字段的时候，正常情况下一般会这么作

select * from a where name like 'a%' or name like 'b%' ....or ...;

但是上面的情况只能对应少量的模糊查询值，过多之后再后台开发的时候会出现非常麻烦的sql语句拼接

这时我们可以采用正则表达式进行匹配

select * from a where name regexp 'a|b|...';

#⁰

广西河池市金城江区 2018-04-08 11:04

js 实现异步上传图片+预览
两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link href="~/Content/Css/bootstrap.3.3.4.min.css" rel="stylesheet" />
    <script src="~/Scripts/Jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.3.3.4.min.js"></script>
</head>
<body style="overflow: scroll; overflow-y: hidden; overflow-x: hidden">
    <div style="height: 20px"></div>
    <div class="container">
        <div class="row">

            <div class="col-md-6 col-md-offset-3">
                <form class="form-horizontal" enctype="multipart/form-data" role="form" id="testform">

                    <input type="hidden" value="1" id="id" name="id" />
                    <div class="control-group">
                        <label for="uname" class="col-md-3 control-label span3">姓 名:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control span3" value="" id="uname" name="uname"
                                placeholder="请输入姓名">
                        </div>
                    </div>

                    <div class="control-group">
                        <label for="pwd" class="col-md-3 control-label span3">密码:</label>
                        <div class="col-md-9">
                            <input type="password" class="form-control span3" value="" id="pwd" name="pwd"
                                placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="col-md-3 control-label span3"></label>
                        <div class="col-md-9">
                            <img src="" width="100px" height="100px">
                        </div>
                    </div>

                    <div class="control-group">

                        <label for="requirement" class="col-md-3 control-label span3">图片上传</label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <input id="photoCover" class="form-control" readonly type="text">
                                <label class="input-group-btn">
                                    <input id="file" type="file" name="file" style="left: -9999px; position: absolute;">
                                    <span class="btn btn-default">Browse</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="col-md-2 control-label span2"></label>
                        <div class="col-md-10">
                            <a class="btn btn-small btn-primary" onclick="saveUser()">方式一</a>
                            <a class="btn btn-small btn-danger" onclick="saveUser2()">方式二</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>

        //html5实现图片预览功能
        $(function () {
            $("#file").change(function (e) {
                var file = e.target.files[0] || e.dataTransfer.files[0];
                $('#photoCover').val(document.getElementById("file").files[0].name);
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function () {
                        $("img").attr("src", this.result);
                    }

                    reader.readAsDataURL(file);
                }
            });
        })
        //方式一 Jquery实现
        function saveUser2() {
            var id = $("#id").val().trim();
            var uname = $("#uname").val().trim();
            var pwd = $("#pwd").val().trim();
            var file = document.getElementById("file").files[0];
            var formData = new FormData();
            formData.append('id', id);
            formData.append('uname', uname);
            formData.append('pwd', pwd);
            formData.append('file', file);

            $.ajax({
                url: "/home/about",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                mimeType: "multipart/form-data",
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        //方式二  原生ajax实现
        function saveUser() {
            var id = $("#id").val().trim();
            var uname = $("#uname").val().trim();
            var pwd = $("#pwd").val().trim();
            var file = document.getElementById("file").files[0];

            //原生ajax实现文件上传
            var form = new FormData();
            form.append("uname", uname); // 可以增加表单数据
            form.append("id", id);
            form.append("pwd", pwd);
            if (file) {
                form.append("file", file);
            }

            //得到xhr对象
            var xhr = null;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.open("post", "/home/about", true);//设置提交方式，url，异步提交
            xhr.onload = function () {
                var data = xhr.responseText;    //得到返回值
                alert(data);
            }
            xhr.send(form);
        }
    </script>
</body>
</html>

注意：
　　1、用JQuery方式需要加两个参数 contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化
　　2、两种方式在组织参数时都需要使用var form = new FormData()

#⁰

广西河池市金城江区 2018-04-08 11:05

便地去掉html中难看的文件上传按钮并实现图片预览功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<label for="file"><img src="images/2.jpg"></label>
<input type="file" id="file" name="" style="display: none"/>
<div id="image" style="width:100px;height:100px; background:#CCCCCC; ">
    <img src="images/2.jpg" height="100px" width="100px" border="5px"/>
</div>
</body>
<script>
    document.getElementById('file').onchange = function() {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
        };
        fr.readAsDataURL(imgFile);
    };
</script>

</html>

#⁰

广西河池市金城江区 2018-04-08 11:07

春夏尚新
淘宝天猫广告推广gif动画图标导航菜单

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。