文件上传

FastAdmin支持将文件或图片直传到第三方云存储服务器而不需要通过服务器进行中转你可以直接在后台插件管理安装第三方云存储的插件后使用，目前支持以下云储存平台：

平台特点插件下载
又拍云申请加入联盟可享每月免费15G流量、图片处理下载
七牛云实名认证后免费10G流量、稳定、图片处理下载
阿里OSS阿里系、稳定、图片处理、支持挂载为分区下载
Ucloud每月20G免费流量、图片处理下载
腾讯COS每月50G免费流量、图片处理下载

在使用第三方云存储功能之前请先注册一个账号并新增一个云储存服务,你可以通过FastAdmin的邀请链接注册，FastAdmin会获得相应平台的CDN流量又拍云：https://www.fastadmin.net/go/upyun七牛云：https://www.fastadmin.net/go/qiniu阿里云：https://www.fastadmin.net/go/aliyun腾讯云：https://www.fastadmin.net/go/tencent

FastAdmin的上传功能非常强大，我们只需要简单的配置即可支持单图或多图上传。

  1. <div class="form-group">
  2.     <label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
  3.     <div class="col-xs-12 col-sm-8">
  4.         <div class="input-group">
  5.             <input id="c-avatar" data-rule="" class="form-control" size="50" name="row[avatar]" type="text" value="{$row.avatar}">
  6.             <div class="input-group-addon no-border no-padding">
  7.                 <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>
  8.                 <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>
  9.             </div>
  10.             <span class="msg-box n-right" for="c-avatar"></span>
  11.         </div>
  12.         <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
  13.     </div>
  14. </div>

我们可以看到这里配置了一个文本框、一个上传按钮、一个选择按钮和一个预览的DIV

类型说明
文本框主要用于接收上传后返回的图片链接，文本框id属性是必选的，这里的id是c-avatar
上传按钮主要用于点击后上传文件，有几个属性非常重要，请参考下方的上传按钮属性介绍
选择按钮主要用于点击后选择已经上传的文件，有几个属性非常重要，请参考下方的选择按钮属性介绍
预览区域主要用于预览上传或选择文件后的预览。id属性是改造的，这里的id是p-avatar

上传按钮支持属性

属性示例值说明
data-urlajax/upload用于配置上传文件接收的地址
data-multipart{"key1":"value1"}用于上传时附加额外的参数信息
data-input-idc-avatar用于填充返回URL地址的设文本框
data-mimetypeimage/gif,image/jpeg,image/png,image/jpg,image/bmp用于过滤允许上传的文件类型，支持mimetype或文件后缀名
data-multiplefalse是否支持多图或多文件模式
data-preview-idp-avatar用于预览返回URL地址的DIV
data-maxsize10M用于限制最大可上传的文件大小

选择按钮支持属性

属性示例值说明
data-input-idc-avatar用于填充返回URL地址的设文本框
data-mimetypeimage/gif,image/jpeg,image/png,image/jpg,image/bmp用于过滤允许上传的文件类型，支持mimetype或文件后缀名
data-multiplefalse是否支持多图或多文件模式
data-preview-idp-avatar用于预览返回URL地址的DIV

如果我们想直接通过JS上传一个文件到我们的服务器，我们可以使用Upload.api.send(file, success, failure, complete)来上传文件。