fastadmin 动态渲染图片上传

html 

    <div class="col-xs-12 col-sm-8" style="margin-left: 117px;margin-bottom: 13px;">
        <button type="button"   id="add_options2" style="background: green;color: #fff">添加选项</button>
        <input type="hidden" value="1" id="num"> //这是为了动态绑定id使用
    </div>
    <div class="table1">
        <div class="form-group table2" id="text2" >
            <label class="control-label col-xs-12 col-sm-2" style="margin-right: 25px;margin-bottom: -25px;">选项:</label>
            <div class="col-xs-12 col-sm-8" style="margin-left: -25px;">
                <div class="input-group ">
                    <input type="text" style="width: 15%" name="row[form_options][]" class="form-control" placeholder="选项" >
                    <input id="c-avatar0" style="width: 85%" placeholder="请选择上传内容[图片，视频，音频]" class="form-control" size="50" name="row[form_options2]" type="text" value="">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="plupload-avatar0" class="btn btn-danger plupload" data-input-id="c-avatar0"   data-multiple="false" data-preview-id="p-avatar0"><i class="fa fa-upload"></i> 上传</button></span>
                        <span><button type="button" id="fachoose-avatar0" class="btn btn-primary fachoose" data-input-id="c-avatar0"   data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
                        <span class="btn  del"  style="background:red;color: #fff">删除</span>
                    </div>
                    <span class="msg-box n-right" for="c-avatar"></span>
                </div>
                <ul class="row list-inline plupload-preview" id="p-avatar0"></ul>
            </div>
        </div>
    </div>

js

api: {
            bindevent: function () {
                $(document).on("click", '#add_options2', function () {
                    var num=$('#num').val();
                    num++;
                    $('#num').val(num);
                    var html = "<div class=\"form-group table2\" >\n" +
                        "            <label class=\"control-label col-xs-12 col-sm-2\">选项:</label>\n" +
                        "            <div class=\"col-xs-12 col-sm-8\">\n" +
                        "                <div class=\"input-group \">\n" +
                        "                    <input type=\"text\" style=\"width: 15%\" name=\"row[form_options][]\" class=\"form-control\" placeholder=\"选项\" >\n" +
                        "<input id=\"c-avatar"+num+"\"" +
                        " style=\"width: 85%\" placeholder=\"请选择上传内容[图片，视频，音频]\" class=\"form-control\" size=\"50\" name=\"row[form_options2]\" type=\"text\" value=\"\">\n" +
                        "                    <div class=\"input-group-addon no-border no-padding\">\n" +
                        "                        <span><button type=\"button\" id=\"plupload-avatar"+num+ "\"" +
                        "class=\"btn btn-danger plupload\" data-input-id=\"c-avatar"+num+ "\"" +
                        "  data-multiple=\"false\" data-preview-id=\"p-avatar"+num+"\"" +
                        "><i class=\"fa fa-upload\"></i> 上传</button></span>\n" +
                        "                        <span><button type=\"button\" id=\"fachoose-avatar"+num+"\"" +
                        " class=\"btn btn-primary fachoose\" data-input-id=\"c-avatar"+num+"\"" +
                        " data-multiple=\"false\"><i class=\"fa fa-list\"></i> 选择</button></span>\n" +
                        "                        <span class=\"btn  del\"  style=\"background:red;color: #fff\">删除</span>\n" +
                        "                    </div>\n" +
                        "                    <span class=\"msg-box n-right\" for=\"c-avatar\"></span>\n" +
                        "                </div>\n" +
                        "                <ul class=\"row list-inline plupload-preview\" id=\"p-avatar"+num+"\"" +
                        "></ul>\n" +
                        "            </div>\n" +
                        "        </div>";
                    $('.table1').append(html);
                    Form.events.plupload("#add-form");//动态绑定上传按钮
                    Form.events.faselect("#add-form");//动态绑定选择附件按钮
                });
                //删除题目
                $(document).on("click", '.del', function () {
                    $(this).parents('.table2').remove();
                });
                Form.api.bindevent($("form[role=form]"));
            }
        },

外附fastadmin10个动态渲染方法 

组件    代码    介绍
文件上传    Form.events.plupload($("form"));    渲染并绑定form中的上传组件
动态下拉列表    Form.events.selectpage($("form"));    渲染并绑定form中的Selectpage组件
表单验证    Form.events.validator($("form"));    渲染并绑定form中的表单验证
城市选择    Form.events.citypicker($("form"));    渲染并绑定form中的城市选择组件
日期时间    Form.events.datetimepicker($("form"));    渲染并绑定form中的日期时间组件
下拉列表    Form.events.selectpicker($("form"));    渲染并绑定form中的Selectpicker组件
附件选择    Form.events.faselect($("form"));    渲染并绑定form中的选择附件组件
键值组件    Form.events.fieldlist($("form"));    渲染并绑定form中的键值组件
开关组件    Form.events.switcher($("form"));    渲染并绑定form中的开关组件
滑块组件    Form.events.slider($("form"));    渲染并绑定form中的滑块组件
如果是动态生成的元素，默认是没有绑定事件的，可以使用上述的代码进行绑定事件。其中$("form")为所需绑定事件元素的父级元素，并不限定为必须是一个form，也可以是个div或p元素。