# 多文件上傳-簡單版本
任何一個`DIV控件`,只需在 `屬性中`中加上 `data-upload-preview=1` 即可實現帶默認樣式的多文件上傳功能。
**務必先看完上一篇文檔,介紹了[基礎](文件上傳-基礎.md)版本內容**
### 先看案例(帶默認值的案例)
```html
<div >
<div
data-upload-preview=1
data-input-id="img_5"
data-maxcount=5
>
</div>
<input type="text"
class="form-control"
name="img_5"
id="img_5"
value="202010/20/1603165133994.jpeg"
data-src="upload/202010/20/1603165133994.jpeg"
>
</div>
```
效果:
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/upload4.mov"></video>
</p>
支持的屬性大致和基礎基本版本一致,不同如下:
- 無需設置 `data-preview-id`
- 無需設置 `data-img-id`
- 基礎屬性的設置是在 點擊的瀏覽按鈕上 設置,而這種方式是設置在DIV控件上。
### 自定義樣式
由于當前這種方式會默認帶有樣式,和選擇文件的按鈕,如果想自定義展示方式有以下兩種方式
- 1、通過css文件,或者style標簽對相應的控件設置屬性
- 2、使用文件上傳的基礎方式,可以完全自定義任何控件和屬性。
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置