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',
// ....
```
其他修改服務器
