# 多文件上传-简单版本
任何一个`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配置