# 文件上傳-基礎版本
任何一個`DOM控件`(通常為按鈕)只需在 `屬性中`中加上 `data-upload="1"` 即可實現上傳的智能化。
### 特別提醒:
- 本文為上傳基礎功能,可以實現所有參數的自定義,但會增加一定的工作量,如果使用更簡單的方式,請查看[簡單版本](文件上傳-傻瓜式.md)
- epii-admin框架默認已經包含了上傳接口,一般無需單獨寫上傳處理,如果需要自己處理上傳邏輯 請查看如何自定義后臺處理
支持的屬性說明
| 屬性 | 意義 |
| ------------------ | ------------------------------------------------------------ |
| data-upload | 固定為1,識別語句 |
| data-input-id | 存儲圖片地址(多個用英文逗號分開)的文本框id值。 |
| data-url | 后臺接口,可以不填,有默認的后臺處理程序,如果想自定義處理程序需查看相應文檔 |
| data-mimetype | 選擇上傳文件類型,默認為"jpg,gif,png,jpeg" |
| data-multiple | 1 或者 0 (默認),是否支持多種圖片 |
| data-maxcount | 默認為1,最多的數量 |
| data-maxsize | 文件大小限制,默認為2M |
| data-img-id | 如果是單個圖片上傳(data-multiple=0), 這個是對應的 img標簽的ID |
| data-preview-id | 如果是多個文件上傳, 這個是對應的 DIV(或者UL等塊狀)標簽的ID |
| data-preview-style | 如下 |
| data-img-style | 對于圖片的樣式設置,也可以自己通過css控制 |
#### 默認值:
**data-input-id ** 對應的input控件,可以通過 **value**來設置默認值,如果圖片預覽地址有前綴,則需要單獨設置`data-src`屬性來做預覽,設置后如果有預覽會自動預覽。
## 案例:
###### 1、單一文件上傳最常見的使用方法 代碼
```html
<div class="form-group">
<label>文件</label>
<input type="text" class="form-control" name="img1" id="img1" required>
<button
class="btn btn-danger" id="filebtn1"
data-upload=1
data-input-id="img1"
data-img-id="img_show_1">
上傳
</button>
</div>
<div >
<img src="" id="img_show_1" style="width: 200px;heigth:200;">
</div>
```
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/upload1.mov"></video>
</p>
#### 2、多文件上傳預覽案例(更簡單默認帶樣式的請參考下一個文檔)
```html
<div class="form-group">
<label>文件(多個)</label>
<input type="text" class="form-control" name="img2" id="img2" required>
<button data-upload=1
data-multiple=1
class="btn btn-danger"
data-input-id="img2"
data-preview-id="img_show_2" id="mfilebtn1"> 上傳</button>
</div>
<div id="img_show_2">
</div>
```
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/upload2.mov"></video>
</p>
#### 3、默認值設置 案例
**data-input-id ** 對應的input控件,可以通過 value 和 data-src 來分別設置提交值和預覽地址,多個均用逗號分割。
```html
<div class="form-group">
<label>文件默認值(多個)</label>
<input type="text" class="form-control"
name="img2" id="img2"
value="202010/20/1603179418546.png,202010/20/1603179668993.jpeg"
data-src="http://127.0.0.1/upload/202010/20/1603179418546.png,
http://127.0.0.1/upload/202010/20/1603179668993.jpeg"
>
<button data-upload=1
data-multiple=1
class="btn btn-danger"
data-input-id="img2"
data-preview-id="img_show_2"> 上傳</button>
</div>
<div id="img_show_2">
</div>
```
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/upload3.mov"></video>
</p>
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置