PianoTime/app/Widget/Tools/ImgUpload.php

<?php
/**
 * 图片上传
 * User: Mike
 * Email: m@9026.com
 * Date: 2016/6/21
 * Time: 11:45
 */


namespace App\Widget\Tools;

use App\Models\CmsLinkModel;

class ImgUpload
{
    /**
     * 单个图片上传
     * @param $folder
     * @param string $position
     * @param array $option
     */
    public function single($id, $name = "data[image]", $file = '')
    {
        $url = U("/Base/Photos/index");
        $imgHtml = "";
        if (!empty($file)) {
            if (!is_array($file)) {
                $img['url'] = $file;
                $img['alt'] = '';

                $iconImage = in_array(fileExt($img['url']), ['jpg', 'png', 'gif', 'jpeg', 'bmp']) ? " <div class='image'><img src=\"{$img['url']}\" alt= /></div>" : "<div class='icon'><i class='fa fa-file'></i></div>";

                $imgHtml .= "<li >
                    <div class=\"file\">
                        <span class=\"corner\"></span>
                        {$iconImage}
                        <div class=\"file-name\">
                            <p>{$img['alt']}</p>
                            <small></small>
                        </div>
                    </div>
                    <em class=\"close\" onclick=\"$(this).parent().remove()\" >×</em>
                    <input type=\"hidden\" name=\"data[{$name}]\" value=\"{$img['url']}\">
                    </li>";
            }
        }
        $html = <<<EOF
                        <link href="/base/plugins/webuploader/webuploader.css" rel="stylesheet">
                        <script src="/base/plugins/webuploader/webuploader.js"></script>
                            <div style="clear:both">
                            <div id="$id" class="layout_upload">
                                <ul class="ullit">
                                    $imgHtml
                                </ul>
                               <button class="btn btn-primary"  id="$id" type="button">选择图片</button>
                            </div>

                             <script>
                                $(document).ready(function(){
                                   $("#{$id}list").sortable({connectWith:"#{$id}list",tag:"a",constraint:"horizontal",scroll:false}).disableSelection()});
                            </script>

                             </div>
                            <script type="text/javascript">
                           
                                $("#$id").click(function() {
                                    layer.open({
                                        type: 2,
                                        title: '选择图片',
                                        shadeClose: true,
                                        shade: 0.8,
                                        area: ['80%', '90%'],
                                        content: '$url',
                                        btn: ['确定'],
                                        yes:function(index, layero){
                                            var body = layer.getChildFrame('body',index);//建立父子联系
                                            var imglist = body.find('div.img-card span.checked');
                                            if(imglist.length > 1){
                                                alert('只能选择单张图片')
                                            }else {
                                            $.each(imglist,function(i) {
                                               $("#$id ul").html("<li data-uploaderid='WU_FILE_0'><div class='file'><span class='corner'></span><div class='image'><img  src=" + $(this).attr('data-src') + " alt= /></div><div class='file-name'><p>" + $(this).attr('data-name') +"</p><small></small></div></div><em class='close' onclick='$(this).parent().remove()'>×</em><input type='hidden' name='{$name}' value="+ $(this).attr('data-src')+"></li>"); 
                                            })
                                            layer.close(index);   
                                          }  
                                         
                                        }                         
                                    });
                                });
                                
                            </script>

EOF;
        return $html;

    }

    /**
     * 统一多张图片
     * @param $folder
     * @param $id
     * @param string $name
     * @param array $imgs
     * @param null $callBackFun
     * @return string
     */
    public function multi($id, $name = "data[image]", $imgs = [])
    {
        $url = U("/Base/Photos/index");
        $imgHtml = "";
        if (!empty($imgs)) {
            foreach ($imgs as $key => $val) {
                if (is_string($val)) {
                    $img['url'] = $val;
                    $img['alt'] = '';
                } else {
                    $img = $val;
                }

                $iconImage = in_array(fileExt($img['url']), ['jpg', 'png', 'gif', 'jpeg', 'bmp']) ? " <div class='image'><img src=\"{$img['url']}\" alt= /></div>" : "<div class='icon'><i class='fa fa-file'></i></div>";

                $imgHtml .= "<li >
                        <div class=\"file\">
                            <span class=\"corner\"></span>
                            {$iconImage}
                            <div class=\"file-name\">
                                <p>{$img['alt']}</p>
                                <small></small>
                            </div>
                        </div>
                        <em class=\"close\" onclick=\"$(this).parent().remove()\" >×</em>
                        <input type=\"hidden\" name=\"{$name}[alt][]\" value=\"{$img['alt']}\">
                        <input type=\"hidden\" name=\"{$name}[url][]\" value=\"{$img['url']}\">
                        </li>";
            }
        }


        $html = <<<EOF
                        <link href="/base/plugins/webuploader/webuploader.css" rel="stylesheet">
                        <script src="/base/plugins/webuploader/webuploader.js"></script>
                            <div style="clear:both">
                            <div id="multi" class="layout_upload">
                                <ul class="ullit">
                                  $imgHtml
                                </ul>
                               <button class="btn btn-primary"  id="$id" type="button">选择图片</button>
                            </div>

                             <script>
                                $(document).ready(function(){
                                   $("#{$id}list").sortable({connectWith:"#{$id}list",tag:"a",constraint:"horizontal",scroll:false}).disableSelection()});
                            </script>

                             </div>
                            <script type="text/javascript">
                           
                                $("#$id").click(function() {
                                    layer.open({
                                        type: 2,
                                        title: '选择图片',
                                        shadeClose: true,
                                        shade: 0.8,
                                        area: ['80%', '90%'],
                                        content: '$url',
                                        btn: ['确定'],
                                        yes:function(index, layero){
                                            var body = layer.getChildFrame('body',index);//建立父子联系
                                            var imglist = body.find('div.img-card span.checked');
                                            $.each(imglist,function(i) {
                                               $('#multi ul').append("<li data-uploaderid='WU_FILE_0'><div class='file'><span class='corner'></span><div class='image'><img  src=" + $(this).attr('data-src') + " alt= /></div><div class='file-name'><p>" + $(this).attr('data-name') +"</p><small></small></div></div><em class='close' onclick='$(this).parent().remove()'>×</em><input type='hidden' name='{$name}[]' value="+ $(this).attr('data-src')+"></li>"); 

                                            })
                                            
                                         layer.close(index);   
                                        }                         
                                    });
                                });
                                
                            </script>

EOF;
        return $html;

    }

    /**
     * 统一上传
     * @param $text         按钮文字
     * @param $folder       上传文件夹
     * @param $id           id
     * @param $option       附加选项
     */
    public function upload($text, $folder, $id, $option = [])
    {
        $folder = urlencode($folder);
        $trigger = $id . '-trigger';
        $modal = $id . '-modal';
        $select_btn = $id . '-select-btn';
        $upload_btn = $id . '-upload-btn';
        $uploader = $id . '_uploader';
        $url = isset($option['url']) ? $option['url'] : 'empty';
        $upload_url = "/admin/Base/Attachment/webupload?folder=" . $folder;
        foreach ($option as $key => $val) {
            $upload_url = $upload_url . '&' . $key . '=' . $val;
        }
        $html = <<<EOF
<link rel="stylesheet" type="text/css" href="/base/plugins/webuploader/webuploader.css">
<script type="text/javascript" src="/base/plugins/webuploader/webuploader.js"></script>
<style type="text/css">
    .webuploader-pick {
        height: 34px
    }
    .webupload-item {
        width: 100%;
        padding: 15px 20px;
        margin-top: 5px;
        border: 1px solid transparent;
        background-color: #E8E8E8;
        display: inline-block;
    }
    .webupload-item.success-status {
        background-color: #00FF66
    }
    .webupload-item.error-status {
        background-color: #FF9966
    }
    .webupload-item .info,
    .webupload-item .status {
        display: inline-block;
    }
    .webupload-item .webupload-cancel,
    .webupload-item .webupload-retry {
        float: right;
    }
    .webupload-item .status {
        margin-left: 15px;
    }
    .uploader-list {
        margin: 20px 15px;
    }
</style>
    <div id="$trigger" class="btn btn-sm btn-primary">$text</div>

    <div class="modal fade" id="$modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="btns">
                                <div id="$select_btn" style="position: absolute; left: 10px; height: 34px">选择图片</div>
                                <div id="$upload_btn" class="btn btn-info" style="position: absolute; left: 110px;">上传图片</div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" class="form-control img-compress-ratio" name="class" placeholder="压缩比，1-50">
                        </div>
                    </div>
                    <div class="row">
                        <div class="uploader-list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    var $uploader = WebUploader.create({
        pick: {
            id: "#$select_btn",
        },
        server: "$upload_url",
        swf: "/base/plugins/webuploader/Uploader.swf",
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    $('#$trigger').on('click', function() {
        $uploader.reset();
        $('.uploader-list', '#$modal').empty();
        $('#$modal').modal('show');
    });

    $('#$upload_btn').on('click', function() {
        ratio = parseInt($('.img-compress-ratio', '#$modal').val());
        if(ratio >= 1 && ratio <= 50) {
            $uploader.options.server = $uploader.options.server + "&compress_ratio=" + ratio;
        } else {
            $uploader.options.server = $uploader.options.server;
        }
        $uploader.upload();
    });

    $uploader.on('fileQueued', function(file) {
        $('.uploader-list', '#$modal').append( '<div id="' + file.id + '" class="webupload-item" data-id="' + file.id + '">' + '<div class="info">' + file.name + '</div>' + '<span class="status">等待上传...</span>' + '<button type="button" class="btn btn-sm btn-default webupload-cancel" data-id="' + file.id + '">取消</button></div>' );
    }).on('uploadProgress', function(file, percentage) {
        $('#' + file.id).removeClass().addClass('webupload-item');
        $('#' + file.id + ' .status').text('正在上传：' + percentage);
    }).on('uploadSuccess', function(file, response) {
        $('#' + file.id).removeClass().addClass('webupload-item success-status');
        $('#' + file.id + ' .status').text('上传完毕');
    }).on('uploadError', function(file, reason) {
        $('.webupload-retry', '#' + file.id).remove();
        $('#' + file.id).removeClass().addClass('webupload-item error-status').append('<button type="button" class="btn btn-sm btn-warning webupload-retry" data-id="' + file.id + '">重试</button>');
        $('#' + file.id + ' .status').text(reason.data.message);
    }).on('uploadAccept', function(object, ret) {
        if(ret.code == 200) {
            return true;
        } else {
            return false;
        }
    }).on('uploadFinished', function() {
        var url = "$url";
        console.log($uploader.getStats());
        if(url != 'empty') {
            window.location = url;
        }
    });

    $uploader.on('error', function(code) {
        var err = '';
        switch (code) {
                case 'F_EXCEED_SIZE':
                    err += '单张图片大小不得超过' +  uploader.options.fileSingleSizeLimit + 'kb！';
                    break;
                case 'Q_EXCEED_NUM_LIMIT':
                    err += '最多只能上传' +  uploader.options.fileNumLimit + '张！';
                    break;
                case 'Q_EXCEED_SIZE_LIMIT':
                    err += '上传图片过大！';
                    break;
                case 'Q_TYPE_DENIED':
                    err += '无效图片类型，请上传正确的图片格式！';
                    break;
                default:
                    err += '上传错误，请刷新重试！';
                    break;
            }
            alert(err);
            return false;
    });
    $('#$modal').on('click', '.webupload-cancel', function() {
        $uploader.removeFile($(this).attr('data-id'), true);
        $(this).closest('.webupload-item').remove();
    }).on('click', '.webupload-retry', function() {
        $uploader.retry($(this).attr('data-id'));
    });

</script>
EOF;
        return $html;
    }
}