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

<?php use common\widgets\UeditorWidget; ?>
<!--百度图片上传-->
<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>
<div class="row">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="teacherName"
                                   value=""
                                   placeholder="">
                            <p></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">头衔：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="title"
                                   value=""
                                   placeholder="">
                            <p></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">头像：</label>
                        <div class="col-sm-10">
                            <div>
                                <img name="teacherAvatar" width="80" src="/images/teacher_default_avatar.jpg" />
                            </div>
                            <div id="uploader-demo" style="margin-top:2px;">
                                <div id="fileList" class="uploader-list"></div>
                                <div id="filePicker">选择图片</div>
                            </div>

                            <input type="hidden" class="form-control" name="avatar" value="" placeholder="">
                            <p></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="field-3">简介：</label>
                        <div class="col-sm-10">
                            <?= UeditorWidget::widget(['name' => 'intro','content' => '']); ?>
                            <p></p>
                        </div>
                    </div>
                    <div class="form-group-separator"></div>
                    <div class="form-group" style="text-align:center;">
                        <button type="button" onclick="addSubmit('click',this)" class="btn btn-info btn-single">确认
                        </button>
                        <button type="button" onclick="history.go(-1);" class="btn btn-info btn-single">返回</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- footer -->
<?php
use backend\widgets\FooterWidget;
?>
<?= FooterWidget::widget() ?>
<!-- footer -->
<script>

    //文章验证流程
    var teacherName = $("input[name=teacherName]");
    var title = $("input[name=title]");
    var avatar = $("input[name=avatar]");
    var intro = $("textarea[name=intro]");

    var needValidate = [teacherName, avatar, intro];

    //修改文章验证流程
    addSubmit();
    function addSubmit() {
        setStats(teacherName, '请填写名称', function (val, mess) {
            var info = [false, mess];
            if (val.length <= 0) {
                info[1] = '请填写名称';
            } else if (getLength(val) > 0) {
                info[0] = true;
                info[1] = '填写正确';
            } else {
                info[0] = false;
            }
            return info;
        });

        setStats(avatar, '请上传头像', function (val, mess) {
            var info = [false, mess];
            if (val.length <= 0) {
                info[1] = '请上传头像';
            } else if (getLength(val) > 0) {
                info[0] = true;
                info[1] = '填写正确';
            } else {
                info[0] = false;
            }
            return info;
        });

        setStats(intro, '请填写简介', function (val, mess) {
            var info = [false, mess];
            if (getLength(val) > 0) {
                info[0] = true;
                info[1] = '填写正确';
            } else {
                info[1] = '请填写简介';
            }
            return info;
        });

        if (arguments[0] == 'click') {//用户点击提交
            var verifyStatus = true;
            for (var m = 0; m < needValidate.length; m++) {
                var singleObj = needValidate[m];
                if (singleObj.attr('addStatus') == undefined) {
                    singleObj.blur();
                }
                if (singleObj.attr('addStatus') == 'no') {
                    verifyStatus = false;
                    continue;
                }
            }
            if (verifyStatus) {
                var data = "teacherName=" + teacherName.val() + "&title=" + title.val() + "&avatar=" + avatar.val() + "&intro=" + intro.val();
                data += "&_csrf=<?= Yii::$app->request->csrfToken ?>";
                $.ajax({
                    type: "POST",
                    url: '/teach/teacher-save-add',
                    data: data,
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.code == 'A0001') {
                            xhPopMsg(data.msg, 1300);//调用定时浮层  XXX毫秒后消失
                            setTimeout(function () {
                                window.location.href = '/teach/teacher';
                            }, 1400);
                        }
                    }
                });
            }
        }
    }
    function setStats(obj, mess, check) {
        obj.focus(function () {
            $(this).removeAttr('addStatus');
            $(this).siblings('p').removeClass('help-error-mention').html('');
            $(this).parent().parent().removeClass("has-success").removeClass('has-error');
        });

        obj.blur(function () {
            var objVal = obj.val();
            var info = check(objVal, mess);
            if (info[0]) {
                $(this).attr('addStatus', 'yes');
                $(this).siblings('p').removeClass('help-error-mention').html('');
                $(this).parent().parent().addClass("has-success").removeClass("has-error");
            } else {
                $(this).attr('addStatus', 'no');
                $(this).siblings('p').addClass('help-error-mention').html(info[1]);
                $(this).parent().parent().addClass("has-error").removeClass("has-success");
            }
        });
    }

    // 图片上传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-teacher-avatar',

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

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

            // 只允许选择文件，可选。
            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) {
            $("img[name=teacherAvatar]").attr('src','<?= Yii::$app->params['imgUrl']?>'+response.data.url);
            $("input[name=avatar]").val(response.data.url);
        });

        // 文件上传失败，现实上传出错。
        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);
            }
        });
    });

</script>