huahuibao/app/admin/views/teach/index.php

<style>
    .flower-img {
        margin-top: 10px;
    }

    .flower-img .flower-gallery-left .flower-gallery-sidebar ul li {
        border-bottom: 1px solid #DDDDDD;
        padding: 10px 0 10px 0;
    }

    .train_right {
        float: right;
        width: 78%;
    }

    .train_right .train_img_item {
        float: left;
        width: 18%;
        border: 1px solid #ccc;
        padding: 3px;
        margin-right: 1%;
        float: left;
        margin-bottom: 20px;
    }

    .train_right .train_img_item .img_bottom_text {
        font-size: 3px;
    }

    .train_right .train_img_item .img_bottom_text .img_order i {
        font-style: normal;
    }

    .train_right .train_img_item .img_bottom_text .img_trash {
        float: right;
        margin-right: 5px;
    }

    .train_right .train_img_category {
        height: 40px;
        border: 1px solid #F3F3F3;
        margin-bottom: 20px;
    }

    .train_right .train_img_category .train_name {
        margin-right: 5%;
        font-weight: bold;
        font-size: 18px;
        float: right;
        margin-top: 6px;
    }

</style>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<!--百度图片上传-->
<link rel="stylesheet" type="text/css" href="/js/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="/js/webuploader-0.1.5/webuploader.js"></script>

<?php
use backend\widgets\TabWidget;

echo TabWidget::widget(['list' => $this->context->menuList, 'currentMenu' => $this->context->id]);
?>
<div class="panel panel-default">
	<?php
	use backend\widgets\SubTabWidget;
	
	echo SubTabWidget::widget(['list' => $this->context->subMenuList, 'currentMenu' => $this->context->action->id]);
	?>
    <section class="gallery-env flower-img">
        <div class="row flower-row">
            <div>
                <div class="col-sm-9 gallery-right train_right">

                    <div class="album-header train_img_category">

                        <div id="uploader-demo" style="display:inline-block;float:left;">
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list"></div>
                            <div id="filePicker">选择图片</div>
                        </div>
                        <div style="margin-top:12px;display:inline-block;width:50%;float:left;margin-left:5px;font-size:12px;font-size:100%;"><?= $categoryInfo['notice'] ?></div>
                        <span class="train_name"><?php echo $categoryInfo['name']; ?></span>
                    </div>
                    <div>
                        <div>
                            <div id="train_img_list"></div>
							<?php if (!empty($models)) {
								foreach ($models as $model) { ?>
                                    <div class="train_img_item" id="train_image_item_<?= $model['id'] ?>">
                                        <a href="javascript:void(0)" class="thumb" data-action="edit">


                                            <img src="/images/grey/<?= $shapeInfo['name'] ?>.gif" style="width:100%;" data-original="<?= Yii::$app->params['imgUrl'] . $model['mobileUrl']; ?>" class="lazy"/>


                                        </a>
                                        <div class="image-options img_bottom_text">
                                                    <span class="img_order"
                                                            id="orderText<?= $model['id'] ?>"><i><?= $model['picSort'] ?></i></span>
                                            <span class="img_order" id="orderNum<?= $model['id'] ?>"
                                                    style="display:none;">
                                                    <input type="text" id="orderInput<?= $model['id'] ?>"
                                                            onblur="saveOrder(<?= $model['id'] ?>,this)"
                                                            style="width:35px;height:16px;font-size:5px;borde:1px solid #E5E5E5"
                                                            value="<?= $model['picSort'] ?>"/>
                                                </span> <a href="javascript:void(0)" data-action="edit"><i
                                                        onclick="changeOrder(this)" class="fa-pencil"></i></a>
                                            <a href="javascript:void(0)" onclick="delImg(<?= $model['id'] ?>)"
                                                    class="img_trash"><i class="fa-trash"></i></a>
                                        </div>
                                    </div>
								<?php }
							} ?>
                        </div>
                        <div>
                            <div class="dataTables_paginate paging_simple_numbers"
                                    style="float:right;padding-top:0px;margin-right:15px;">
								<?= $paging ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 gallery-left flower-gallery-left" style="width:18%">
                    <div class="gallery-sidebar flower-gallery-sidebar">
                        <a href="javascript:"
                                class="btn btn-block btn-secondary btn-icon btn-icon-standalone btn-icon-standalone-right">
                            <i data-toggle="tooltip" data-placement="top" title="" data-original-title="建议上传图片比例：600 x 400" class="linecons-photo"></i>
                            <span>分类</span> </a>
                        <ul class="list-unstyled">
							<?php if (!empty($category)) {
								foreach ($category as $cat) { ?>
                                    <li class="active">
                                        <a href="/teach/index?categoryId=<?= $cat['id'] ?>"> <i class="fa-folder-o"></i>
                                            <span <?php if ($categoryId == $cat['id']) { ?>
                                                style="font-weight:bold"
											<?php }; ?> ><?php echo $cat['name']; ?></span> </a>
                                    </li>
								<?php }
							} ?>
                        </ul>

                    </div>

                </div>
            </div>
        </div>
    </section>
</div>

<!-- footer -->
<?php
use backend\widgets\FooterWidget;

echo FooterWidget::widget();
?>
<!-- footer -->

<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>
<script>
    $(".lazy").lazyload({effect: "fadeIn"});
</script>

<script>
    // 图片上传demo
    jQuery(function () {
        var $ = jQuery,
            $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: '/js/webuploader-0.1.5/Uploader.swf',
            //swf: BASE_URL + '/js/Uploader.swf',

            // 文件接收服务端。
            server: '/teach/upload-img',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            //是否允许重复上传
            duplicate: true,
            fileSingleSizeLimit: 1 * 1024 * 1024,//上传限制1M
            fileNumLimit: 5,//每次只能传5张

            formData: {"_csrf": '<?= Yii::$app->request->csrfToken?>', "categoryId": <?= $categoryId ?>},

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            //这里可以取到图片的宽高
            //uploader.makeThumb(file, function (error, src) {
            //console.log(file._info.width + '*' + file._info.height)
            //uploader.removeFile( file );
            //}, 100, 100);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {

        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {

            var imgItem = '<div class="train_img_item" id="train_image_item_' + response.data.id + '">\
                            <a href="javascript:void(0)" class="thumb" data-action="edit">\
                            <img src="<?= Yii::$app->params['imgUrl']?>' + response.data.url + '" class="img-responsive"/>\
                            </a>\
                            <div class="image-options img_bottom_text">\
                            <span class="img_order"><i>' + response.data.picSort + '</i></span>\
                            <span class="img_order"  style="display:none;">\
                            <input type="text" value="' + response.data.picSort + '" onblur="saveOrder(' + response.data.id + ',this)" style="width:35px;height:16px;font-size:5px;borde:1px solid #E5E5E5" />\
                            </span>\
                            <a href="javascript:void(0)" data-action="edit"><i onclick="changeOrder(this)" class="fa-pencil"></i></a>\
                            <a href="javascript:void(0)" onclick="delImg(' + response.data.id + ')" class="img_trash"><i class="fa-trash"></i></a>\
                            </div>\
                            </div>';
            $("#train_img_list").append(imgItem);

        });

        // 文件上传失败，现实上传出错。
        uploader.on('uploadError', function (file) {

        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            xhPopMsg('上传成功', 1000);
        });

        uploader.on("error", function (type) {
            if (type == "Q_TYPE_DENIED") {
                alert("请上传JPG、PNG、GIF、BMP格式文件");
            } else if (type == "F_EXCEED_SIZE") {
                alert("单张图片不能超过1M");
            } else {
                alert("上传出错！请检查后重新上传！错误代码" + type);
            }
        });
    });

    function delImg() {
        var respond = confirm('确认删除？');
        if (respond == false) {
            return false;
        }
        var id = arguments[0];
        $.ajax({
            type: "GET", url: '/teach/del-img?id=' + id, async: false, dataType: 'json', success: function (data) {
                if (data.code == 'A0001') {
                    xhPopMsg(data.msg, 5000);//调用定时浮层  XXX毫秒后消失
                    $("#train_image_item_" + id).remove();
                } else {
                    xhPopMsg(data.msg, 5000);//调用定时浮层  XXX毫秒后消失
                }
            }
        });
    }

    function changeOrder() {
        var o = arguments[0];
        $(o).parent().siblings().eq(0).css('display', 'none');
        $(o).parent().siblings().eq(1).css('display', 'inline-block');
    }

    function saveOrder() {
        var id = arguments[0];
        var o = arguments[1];
        var num = $(o).val();
        $.ajax({
            type: "GET",
            url: '/teach/change-order?id=' + id + '&num=' + num,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 'A0001') {
                    xhPopMsg(data.msg, 5000);//调用定时浮层  XXX毫秒后消失
                    setTimeout(function () {
                        window.location.reload(true);
                    }, 900);
                } else {
                    xhPopMsg(data.msg, 5000);//调用定时浮层  XXX毫秒后消失
                }
            }
        });
    }
</script>