首页 » jQuery » 仿微博风格的图片上传并实时显示实现(plupload,PHP)

仿微博风格的图片上传并实时显示实现(plupload,PHP)

原文 http://blog.csdn.net/Jingle_cjy/article/details/79101103

2018-01-19 02:00:19阅读(171)

没错,又是我,一只悲催的毕设咸鱼!这次实现的是微博发布动态时,选择图片上传按钮。按照惯例来个效果图。
仿微博<a href=风格的图片上传并实时显示实现(pluploadPHP)" src="http://img.blog.csdn.net/20180118211111539?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmluZ2xlX2NqeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="多图上传" title="">

这次使用了一个jquery插件plupload,具体的实现没有细究,拿过来直接就用了。上手还是很简单的,参考了几个博客就能实现基本功能了。微博的添加按钮是占据一个图片位置,每添加一个图片就向后移一位。注意:坑来了,使用这个插件的时候每次添加图片之后,添加的图片会处在之前添加按钮的位置,然后这个位置的图片点击之后也可以打开文件夹!简直惊了个呆,我尝试了各种方法都没有办法解决这个BUG(通过settings尝试重新绑定按钮/删除按钮,重新添加都没用),估计是DOM渲染问题。最后发现了官方的一个函数refresh(),作用如下:

Refreshes the upload instance by dispatching out a refresh event to all runtimes. This would for example reposition flash/silverlight shims on the page.

emmm……中文文档里看了好几个都写的是作用不明??!
以后果然不能偷懒看中文文档,总之每次上传之后就刷新一下实例,BUG就解决了。如果有其他方法欢迎交流━(*`∀´*)ノ亻!

接下来上代码,如果嫌弃太长的可以前往我的github下载

upload.html
<!DOCTYPE html>
<html>
<head>
    <title>仿微博动态图片上传</title>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/plupload/plupload.full.min.js"></script>
    <style type="text/css">
        #container {
            position: relative;
        }
        #uploadBtn {
            height: 2em;
            background-color: #767997;
            border: none;
            outline: none;
            color: white;
            box-shadow: inset 2px 2px 2px #a9acca,
                        inset -2px -2px 2px #434664;
        }
        #pic-list {
            list-style-type: none;
            position: absolute;
            border: 2px solid #767997;
            padding: 5px;
            display: none;
            width: 315px;
        }
        #pic-list #triangle {
            border: 10px solid #767997;
            border-color: transparent transparent #767997 transparent;
            position: absolute;
            top: -20px;
            left: 5px;
        }
        #pic-list #title {
            padding-bottom: 5px;
        }
        #pic-list #title span {
            font-weight: bold;
        }
        #pic-list #title b {
            float: right;
        }
        #pic-list #title b:hover {
            color: #434664;
        }
        #pic-list #title #hint {
            color: #434664;
            font-size: .7em;
            padding-top: .7em;
        }
        #pic-list li {
            position: relative;
            display: inline-block;
            float: left;
            margin: 5px 5px 0px 0px;
            font-size: 0px; /* 解决换行间隙问题 */
        }
        #pic-list li#addBtn {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 90px;
            border: 2px dashed #CCC;
            color: #CCC;
            font-size: 80px;
            text-align: center;
            padding-bottom: 30px;
        }
        #pic-list li img {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 2px dashed #CCC;
        }
        #pic-list li:not(#addBtn):hover {
            filter: alpha(Opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }
        #pic-list li#addBtn:hover {
            border-color: #767997;
            color: #767997;
        }
        #pic-list li b{
            display: none;
            position: absolute;
            right: 0px;
            top: 0px;
            color: black;
            font-size: 15px;
            text-align: center;
        }
        #pic-list li:not(#addBtn):hover b {
            display: block;
            width: 20px;
            height: 20px;
        }
        #pic-list li:not(#addBtn):hover b:hover {
            background-color: #808080;
        }
    </style>
</head>
<body>
    <div id="container">
        <button type="button" id="uploadBtn"><i class="fa fa-picture-o" aria-hidden="true"></i>&nbsp图片&nbsp;</button>
        <ul id="pic-list">
            <span id="triangle"></span>
            <div id="title">
                <span>本地上传</span><b onclick="delall()">X</b>
                <div id="hint">共0张,还能上传9张</div>
            </div>
            <li id="addBtn">+</li>
        </ul>
    </div>
    <script type="text/javascript">
        $("#uploadBtn").click(function(event) {
            if($("#pic-list").css("display") == "none") {
                $("#addBtn").trigger('click');
            }
        });
        var uploader = new plupload.Uploader({ // 创建实例的改造方法
            runtimes: "html5, flash, silverlight, html4", // 上传插件初始化选用方法的优先级顺序
            browse_button: "addBtn",                   // 上传按钮
            url: "PHP/up_pics.php?get=upimg",                 // 远程上传处理地址
            flash_swf_url: "js/plupload/Moxie.swf",       // flash文件地址
            silverlight_xap_url: "js/plupload/Moxie.xap", // silverlight文件地址
            filters: {
                max_file_size: "10mb", // 最大上传1文件大小(格式100b, 10kb, 10mb, 1gb)
                mime_types: [ // 允许文件上传的类型
                    {title: "files", extensions: "jpg,png,gif"}
                ]
            },
            multipart_params: {}, // 文件上传附加参数
            file_data_name: "file", // 文件上传名称
            multi_selection: true,  // true: 允许一次选择多个文件(ctrl),false: 不允许
            init: {
                FilesAdded: function(up, files) { // 文件上传前
                    var recNum = $("#pic-list").children("li").length;
                    if(recNum>=10) {
                        alert("已上传9张图片!");
                        uploader.destroy();
                        console.log("destroy");
                    } else {
                        var li = "";
                        plupload.each(files, function(file) { // 遍历文件
                            li += "<li id='"+file.id+"'><div class='progress'><span class='bar'></span><span class='percent'>上传中 0%</span></div></li>";
                            recNum += 1; 
                            if(recNum==10) return false;
                        });
                        $("#addBtn").before(li);
                        if($("#pic-list").css("display") == "none"){$("#pic-list").show();} 
                        if(recNum>=10) {
                            $("#addBtn").css("display", "none");
                        }
                        uploader.start();
                    }
                    console.log("FilesAdded");
                },
                UploadProgress: function(up, file) { // 上传中,显示进度条
                    var percent = file.percent;
                    $("#"+file.id).find('.bar').css({"width": percent+'%'});
                    $("#"+file.id).find('.percent').text("上传中 "+percent+'%');
                    console.log("progress");
                },
                FileUploaded: function(up, file, info) { // 文件上传成功时触发
                    var data = JSON.parse(info.response);
                    $("#"+file.id).html("<img src='PHP/"+data.url+"'/><b onclick='delimg(this)'>x</b><input type='hidden' name='' value='PHP/"+data.url+"'>");
                    console.log("success");
                    uploader.refresh(); // 重新渲染DOM,避免在添加按钮原位置仍会响应打开文件夹
                    var recNum = $("#pic-list").children("li").length-1;
                    var hintText = "共"+recNum+"张,还能上传"+String(9-recNum)+"张";
                    $("#hint").text(hintText);
                },
                Error: function(up, err) { // 上传出错的时候触发
                    alert("error");
                }
            }
        });
        uploader.init();
        function delimg(o) {
            console.log("delete");
            var src = $(o).prev().attr("src");
            $.post('PHP/up_pics.php?get=delimg&imgurl='+src.substring(4), function(data) {
                /*optional stuff to do after success */
                if(data == 1) {
                    if ($("#pic-list").children("li").length==10) {
                        $("#addBtn").css("display", "block");
                    }
                    $(o).parent().remove();
                    var recNum = $("#pic-list").children("li").length-1;
                    var hintText = "共"+recNum+"张,还能上传"+String(9-recNum)+"张";
                    $("#hint").text(hintText);
                }
                else {
                    console.log(data);
                }
            });
        }
        function delall() {
            $("#pic-list").hide();
            $("#pic-list li").children("b").each(function(index, el) {
                delimg(el);
            });
        }
    </script>
</body>
</html>
up_pics.php
<?php
    $typeArr = array("jpg", "png", "gif"); // 允许文件上传格式
    $path = "files/"; // 上传路径
    if(!is_dir($path)) mkdir($path);
    if(isset($_POST)) {
        if($_GET["get"] == "upimg") {
            $name = $_FILES['file']['name'];
            $size = $_FILES['file']['size'];
            $name_tmp = $_FILES['file']['tmp_name'];
            if (empty($name)) {
                echo json_encode(array("error"=>"您还未选择图片"), JSON_UNESCAPED_UNICODE );
                exit;
            }
            $type = strtolower(substr(strrchr($name, '.'), 1)); // 获取文件类型
            if(!in_array($type, $typeArr)) {
                echo json_encode(array("error"=>"请上传jpg, png或gif类型的图片!"), JSON_UNESCAPED_UNICODE );
            }
            if($size>(1024*1024*10)) {
                echo json_encode(array("error"=>"图片大小已超过10MB!"), JSON_UNESCAPED_UNICODE );
                exit;
            }
            $pic_name = time().rand(10000, 99999).".".$type; // 重命名图片
            $pic_url = $path.$pic_name; // 上传后的图片路径+名称
            if(move_uploaded_file($name_tmp, $pic_url)) { // 临时文件转移到目标文件夹
                echo json_encode(array("error"=>"0", "url"=>$pic_url, "name"=>$pic_name), JSON_UNESCAPED_UNICODE );
            } else {
                echo json_encode(array("error"=>"上传有误,请检查服务器配置!"), JSON_UNESCAPED_UNICODE );
            }
        }
    }
    if($_GET['get'] == 'delimg') {
        $imgsrc = $_GET['imgurl'];
        unlink($imgsrc);
        echo 1;
    }
?>
参考

[1] 我的代码github地址
[2] JS插件实现多图上传并显示进度条加删除实例
[3] 官方文档

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹