# 文件上传-基础版本 任何一个`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>