FastAdmin前端开发——附件添加图片、文件

一、前端开发基础文件

序号	文件路径	功能
1	application/index/controller	控制器文件
2	application/index/lang/zh-cn	语言包
3	application/index/model	模型文件
4	application/index/view/common/sidenav.html	左侧菜单栏
5	application/index/view/index.html	右侧列表视图
6	application/index/view/add.html	添加页面视图
7	application/index/view/edit.html	编辑页面视图
8	application/index/view/detail.html	查看页面视图
9	public/assets/js/frontend	功能模块JS文件

二、数据库添加字段

字段名，以特殊字符结尾的规则，官网文件：

例如：

三、右侧列表视图

（1）文件位置：application/index/view/菜单名/index.html

（2）增加代码：

 <td class="text-center hidden-xs">
     {if condition="$list.attachfile"}
        <a href="{$list.attachfile}" target="_blank">
            <img src="{$list.attachfile}" alt="附件图片" class="thumbnail img-responsive" />
        </a>
     {else}
         没有图片
     {/if}
 </td>

（3）如下图：

四、添加页面视图

（1）文件位置：application/index/view/菜单名/add.html

（2）增加代码：

     <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Attachfile')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-attachfile" class="form-control" size="50" name="row[attachfile]" type="text">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-attachfile" class="btn btn-danger faupload" data-input-id="c-attachfile" data-multiple="false" data-preview-id="p-attachfile"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fachoose-attachfile" class="btn btn-primary fachoose" data-input-id="c-attachfile" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-attachfile"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-attachfile"></ul>
                            </div>
                        </div>

（3）如下图：

五、编辑页面视图

（1）文件位置：application/index/view/菜单名/edit.html

（2）增加代码：

     <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Attachfile')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-attachfile" class="form-control" size="50" name="row[attachfile]" type="text">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-attachfile" class="btn btn-danger faupload" data-input-id="c-attachfile" data-multiple="false" data-preview-id="p-attachfile"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fachoose-attachfile" class="btn btn-primary fachoose" data-input-id="c-attachfile" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-attachfile"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-attachfile"></ul>
                            </div>
                        </div>

 六、查看页面视图

（1）文件位置：application/index/view/菜单名/detail.html

（2）增加代码：

     <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2">{:__('Attachfile')}:</label>
                            <div class="col-xs-12 col-sm-8">
                                <div class="input-group">
                                    <input id="c-attachfile" class="form-control" size="50" name="row[attachfile]" type="text">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-attachfile" class="btn btn-danger faupload" data-input-id="c-attachfile" data-multiple="false" data-preview-id="p-attachfile"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                        <span><button type="button" id="fachoose-attachfile" class="btn btn-primary fachoose" data-input-id="c-attachfile" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-attachfile"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-attachfile"></ul>
                            </div>
                        </div>

  七、功能模块JS文件

（1）文件位置：public/assets/js/frontend/菜单名.js

（2）增加代码：

{field: 'attachfile', title: __('Attachfile'), operate: 'LIKE'},

（3）如下图：

八、效果图