主页

Fieldlist的json自定义表单配置图片上传

梅子黄时雨   IP属地: 青海
0 点赞 0阅读 1447

<div class="form-group row">
        <label class="control-label col-xs-12 col-sm-2">{:__('元素事件')}:</label>
        <div class="col-xs-12 col-sm-8">
            <dl class="fieldlist" data-template="eventtpl" data-name="row[event]">
                <dd>
                    <ins>{:__('名称')}</ins>
                    <ins>{:__('上传图片')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <textarea  name="row[event]" class="form-control " cols="30" rows="5">[{"name":"admin","image":"/uploads/20240701/07ed83a8a0c3d9e2d1afd94e3d14a8b2.jpg"}]</textarea>
            </dl>
            <script id="eventtpl" type="text/html">
                    <dd class="form-inline" style="display: flex;">
                        <ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="名称"/></ins>
                        <ins style="flex: 1;">
                                <div class="input-group">
                                    <input id="c-image<%=index%>" class="form-control" size="50" name="<%=name%>[<%=index%>][image]" type="text" value="<%=row.image%>">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-image<%=index%>" class="btn btn-danger faupload" data-input-id="c-image<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image<%=index%>" initialized=""true><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose" data-input-id="c-image<%=index%>" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-image<%=index%>"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-image<%=index%>"></ul>
                        </ins>
                        <span class="btn btn-sm btn-danger btn-remove" style="height: 32.56px;"><i class="fa fa-times"></i></span>
                        <span class="btn btn-sm btn-primary btn-dragsort" style="height: 32.56px;"><i class="fa fa-arrows"></i></span>
                    </dd>
                </script>
        </div>
    </div>

api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
                $(document).on('fa.event.appendfieldlist', '#add-form .btn-append', function (e,obj) { 
                    Form.events.selectpage(obj);
                    Form.events.faupload(obj);
                    Form.events.faselect(obj);

                })
            }
        }


官网文档:https://doc.fastadmin.net/doc/184.html#toc-2


© 著作权归作者所有,转载或内容合作请联系作者