gganli/application/admin/view/attire_back/add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('User_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-user_id" data-rule="required" data-source="user/user/index" data-order-by="id desc" data-format-item="[{id}]-[{nickname}]" data-field="nickname" class="form-control selectpage" name="row[user_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]">
                {foreach name="typeList" item="vo"}
                <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Attire_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-attire_id" data-rule="required" data-source="attire/attire/index" data-order-by="id desc" data-format-item="[{id}]-[{title}]" data-field="title" class="form-control selectpage" name="row[attire_id]" type="text" value="">
        </div>
    </div>

    <!--<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Attire_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-attire_name" class="form-control" name="row[attire_name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" data-rule="required" class="form-control" name="row[price]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('File_image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-file_image" data-rule="required" class="form-control" size="50" name="row[file_image]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-file_image" class="btn btn-danger faupload" data-input-id="c-file_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-file_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-file_image" class="btn btn-primary fachoose" data-input-id="c-file_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-file_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-file_image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Android_image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-android_image" data-rule="required" class="form-control" size="50" name="row[android_image]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-android_image" class="btn btn-danger faupload" data-input-id="c-android_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-android_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-android_image" class="btn btn-primary fachoose" data-input-id="c-android_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-android_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-android_image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Gif_image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-gif_image" class="form-control" size="50" name="row[gif_image]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-gif_image" class="btn btn-danger faupload" data-input-id="c-gif_image" data-mimetype="gif,svga" data-multiple="false" data-preview-id="p-gif_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-gif_image" class="btn btn-primary fachoose" data-input-id="c-gif_image" data-mimetype="file/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-gif_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-gif_image"></ul>
            <div style="padding:2px 33px;margin-top:10px;width:120px;color:#fff3f6;cursor:pointer;background-color: #00A000;border-radius: 2px;" onclick="play()">播放动画</div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Limit_day')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-limit_day" data-rule="required" class="form-control" name="row[limit_day]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Duetime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-duetime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[duetime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Is_use')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-is_use" data-rule="required" class="form-control selectpicker" name="row[is_use]">
                {foreach name="isUseList" item="vo"}
                    <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Is_using')}:</label>
        <div class="col-xs-12 col-sm-8">
                        
            <select  id="c-is_using" data-rule="required" class="form-control selectpicker" name="row[is_using]">
                {foreach name="isUsingList" item="vo"}
                    <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>-->
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<style>

    #demoCanvas{
        width: 100px;
        height: 80px;
    }
</style>
<script src="/assets/js/svga.min.js" ></script>
<script>
    // 播放
    function play() {
        $("#p-gif_image li a.thumbnail").html("<div id='demoCanvas'></div>");

        var player = new SVGA.Player('#demoCanvas');
        player.loops=1;
        player.clearsAfterStop=false;

        var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。

        var svgaUrl = $("#c-gif_image").val();

        if(svgaUrl.indexOf("http://") == -1 && svgaUrl.indexOf("https://") == -1) {
            svgaUrl = "{$Think.config.cos.url}"+svgaUrl;
        }
        parser.load(svgaUrl, function(videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation();
        })
    }
</script>