FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。
~~~
<div class="form-group">
<label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-avatar" data-rule="" class="form-control" size="50" name="row[avatar]" type="text" value="{$row.avatar}">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
<span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
</div>
<span class="msg-box n-right" for="c-avatar"></span>
</div>
<ul class="row list-inline plupload-preview" id="p-avatar"></ul>
</div>
</div>
~~~
我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV
| 类型 | 说明 |
| --- | --- |
| 文本框 | 主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是`c-avatar` |
| 上传按钮 | 主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍 |
| 选择按钮 | 主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍 |
| 预览区域 | 主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是`p-avatar` |
上传按钮支持属性
| 属性 | 示例值 | 说明 |
| --- | --- | --- |
| data-url | ajax/upload | 用于配置上传文件接收的地址 |
| data-multipart | {"key1":"value1"} | 用于上传时附加额外的参数信息 |
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
| data-maxsize | 10M | 用于限制最大可上传的文件大小 |
选择按钮支持属性
| 属性 | 示例值 | 说明 |
| --- | --- | --- |
| data-input-id | c-avatar | 用于填充返回URL地址的设文本框 |
| data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 |
| data-multiple | false | 是否支持多图或多文件模式 |
| data-preview-id | p-avatar | 用于预览返回URL地址的DIV |
如果我们想直接通过JS上传一个文件到我们的服务器，我们可以使用`Upload.api.send(file, success, failure, complete)`来上传文件。
**上传视频**
一、在html文件中，添加2个属性data-mimetype和data-maxsize。
```
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Vediofile')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-vediofile" class="form-control" size="50" name="row[vediofile]" type="text">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-vediofile" class="btn btn-danger plupload" data-input-id="c-vediofile" data-mimetype="mp4,mp3,avi,flv,wmv" data-multiple="false" data-maxsize="50M"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-vediofile" class="btn btn-primary fachoose" data-input-id="c-vediofile" data-mimetype="mp4,mp3,avi,flv,wmv" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-vediofile"></span>
</div>
</div>
</div>
```
二、修改application/extra/upload.php中的maxsize配置：
```
<?php
//上传配置
return [
// ....
/**
* 最大可上传大小
*/
'maxsize' => '50mb',
/**
* 可上传的文件类型(新增mp4,mp3,avi,flv,wmv视频文件后缀)
*/
'mimetype' => 'jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx,mp4,mp3,avi,flv,wmv',
// ....
```
其他修改服务器
