simple-yewu/frontend/views/gift/edit.php

<?php
use \common\libs\MyLib;
?>
<?php $this->beginBlock('header_css'); ?>
<link rel="stylesheet" type="text/css" href="/assets/css/plugins/webuploader/webuploader.css">
<?php $this->endBlock(); ?>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <form role="form" class="form-horizontal data-from" id="theFrm">
                        <input type="hidden" name="id" value="<?=intval($info->id)?>">
                        <div class="form-group">
                            <label class="col-md-1 control-label">名称</label>
                            <div class="col-md-3">
                                <input type="text" name="name" value="<?=$info->name?>" class="form-control">
                            </div>
                            <label class="col-md-1 control-label">所属分类</label>
                            <div class="col-md-3">
                                <select name="type_id" class="form-control">
                                    <option value="0">---请选择---</option>
                                    <option value="1" <?=$info->type_id==1?'selected':''?>>实物礼品</option>
                                    <option value="2" <?=$info->type_id==2?'selected':''?>>礼券</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-1">图片</label>
                            <div id="uploader" class="wu-example col-sm-10 col-md-6">
                                <input type="hidden" name="img" id="img" value="<?=$info->original_img?>">
                                <!--预览-->
                                <div id="preview" class="uploader-list" style="margin-bottom: 3px"><img src="<?=$info->original_img?>" alt="" class="img-responsive"></div>
                                <div id="picker" class="col-sm-5 col-md-3">选择文件</div>
                                <div id="ctlBtn" class="btn btn-primary" style="height: 40px">开始上传</div>
                                　　<span class="require_red font-size">图片尺寸255x255，透明背景</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">价格</label>
                            <div class="col-md-3">
                                <input type="text" name="price" value="<?=$info->price?>" class="form-control">
                            </div>
                            <label class="col-md-1 control-label">使用次数</label>
                            <div class="col-md-3">
                                <input type="text" name="use_num" value="<?=$info->use_num?>" class="form-control">
                            </div>
                            <label class="col-md-1 control-label">总数量</label>
                            <div class="col-md-3">
                                <input type="text" name="total" value="<?=$info->total?>" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">描述</label>
                            <div class="col-md-6">
                                <textarea name="remark" class="form-control"><?=$info->remark?></textarea>
                            </div>
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-md-5 col-md-offset-5">
                                    <button class="btn btn-primary btn-save" type="button">
                                        <strong><?=$info ? '保 存':'添 加'?></strong>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $this->beginBlock('footer_js'); ?>
<script src="/assets/js/plugins/webuploader/webuploader.min.js"></script>
<script type="text/javascript" language="javascript">
    $(function () {
        //提交按钮
        $(".btn-save").click(function(){
            parent.layer.confirm('是否确认提交？', {
                btn: ['确认','取消'], //按钮
                shade: false //不显示遮罩
            }, function(){
                var params = $("#theFrm").serialize();
                $.post('/gift/save',params,function(obj){
                    if(obj.success) {
                        parent.layer.msg('保存成功');
                        parent.refreshList();
                        layer_close();
                    } else {
                        parent.layer.msg(data.msg);
                    }
                },'json');
            }, function(){
                //
            });
        });
    })
    var uploader = WebUploader.create({
        auto:false,

        // swf文件路径
        swf: "/assets/js/plugins/webuploader/Uploader.swf) ",

        // 文件接收服务端。
        server: "/common/upload",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
            id:'#picker',
            multiple:false  //限制多文件上传
        },
        accept:{
            title:'Images',
            extentions: "png,jpeg,jpg",
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        formData:{
            '_token':'{{csrf_token()}}'//laravel框架必不可少的
        },
        fileVal:"img",
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        fileNumLimit: 1
    });
    uploader.on( 'fileQueued', function( file ) {
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                layer.msg('不能预览');
                return;
            }
            $("#preview").html("<img src='"+src+"'>");
        }, 100, 100 );
        //删除错误的第一个文件
        $("#picker").on("click",function () {
            uploader.removeFile(file);
        })
    });
    //点击上传
    $("#ctlBtn").on("click",function () {
        uploader.upload();
    })
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file , msg ) {
        $( '#'+file.id ).addClass('upload-state-done');
        // 把服务器返回的图片地址保存到隐藏域
        if(msg.status ="SUCCESS"){
            layer.msg('上传成功',{icon:1,time:2000});
            $('input[name=img]').val( msg.fileUrl );
        }else{
            layer.msg("上传失败",{icon:2,time:3000});
        }

    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });
</script>
<?php $this->endBlock('footer_js'); ?>