fastadmin自定义Fieldlist(json字段)上传图片

分类首页前端日期9个月前访问369评论0
先看效果图:


首先form表单添加如下代码

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cover_json')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <dl class="fieldlist" data-template="basictpl" data-name="row[cover_json]">
                <dd>
                    <ins>图片名称</ins>
                    <ins>图片地址</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append option"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <textarea name="row[cover_json]" class="form-control hide" cols="30" rows="5">
                    [{"key":"","value":""}]
                </textarea>
            </dl>
        </div>
    </div>

在form表单底部添加如下代码

<script type="text/html" id="basictpl">
    <dd class="form-inline">
        <input type="text" name="<%=name%>[<%=index%>][key]"  class="form-control" value="<%=row['key']%>"> 
        <input type="text" name="<%=name%>[<%=index%>][value]" id="o-<%=index%>" class="form-control" value="<%=row['value']%>"> 
        <span><button type="button" id="faupload-<%=index%>" class="btn btn-danger plupload "  data-input-id="o-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
        <span><button type="button" id="fachoose-<%=index%>" class="btn btn-primary fachoose" data-input-id="o-<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> 
        <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
    </dd>
</script>
在js添加如下代码
add: function () {
            Controller.api.bindevent();
            $(document).on("fa.event.appendfieldlist", "#add-form .btn-append", function (e,obj) {
                Form.events.faupload(obj);
                Form.events.faselect(obj);
                //Form.events.selectpage(obj);
            })
        },