# 文件上傳-基礎版本 任何一個`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>