完善文件上传文档
This commit is contained in:
parent
64853519b7
commit
a5632aa299
@ -0,0 +1,228 @@
|
||||
# 文件上传
|
||||
|
||||
layui需要引入 **upload** 模块
|
||||
|
||||
如果上传图片，需要引入`viewer.css`和`viewer.js`
|
||||
|
||||
css
|
||||
|
||||
```html
|
||||
<!-- 需要时引入 -->
|
||||
<link rel="stylesheet" href="assets/js/viewer/viewer.min.css" media="all">
|
||||
```
|
||||
|
||||
js
|
||||
|
||||
```html
|
||||
<!-- 需要时引入 -->
|
||||
<script src="assets/js/viewer/viewer.min.js"></script>
|
||||
|
||||
<script src="assets/js/layui/util/layui-file-upload.js"></script>
|
||||
```
|
||||
|
||||
初始化
|
||||
|
||||
```js
|
||||
// 引入viewer.js
|
||||
let layuiFileUpload = new LayuiFileUpload(layui, Viewer);
|
||||
// 未引入viewer.js
|
||||
let layuiFileUpload = new LayuiFileUpload(layui);
|
||||
```
|
||||
|
||||
## 表单
|
||||
|
||||
html模板
|
||||
|
||||
```html
|
||||
|
||||
<div id="xxxBox" class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label"></label>
|
||||
<button type="button" class="layui-btn layui-upload-file-btn" id="xxxUploadBtn">上传XXX</button>
|
||||
<div class="upload-image-box">
|
||||
<input type="hidden" id="xxx" name="xxx">
|
||||
<div class="layui-btn-container" id="xxxFileBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> xxx为名称，需要保持一致
|
||||
|
||||
### 上传图片
|
||||
|
||||
#### 后台
|
||||
|
||||
```js
|
||||
layuiFileUpload.initUploadImage(fieldName, fileCount);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|----------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
|
||||
#### H5端，校验token
|
||||
|
||||
```js
|
||||
let headers = {token: 'token'};
|
||||
layuiFileUpload.initAppUploadImage(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 |
|
||||
|
||||
#### H5端，校验userId
|
||||
|
||||
```js
|
||||
let headers = {userId: 'userId'};
|
||||
layuiFileUpload.initAppReleaseUploadImage(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|-------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 |
|
||||
|
||||
### 上传文件
|
||||
|
||||
#### 后台
|
||||
|
||||
```js
|
||||
layuiFileUpload.initUploadFile(fieldName, fileCount);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|----------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
|
||||
#### H5端，校验token
|
||||
|
||||
```js
|
||||
let headers = {token: 'token'};
|
||||
layuiFileUpload.initAppUploadFile(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 |
|
||||
|
||||
#### H5端，校验userId
|
||||
|
||||
```js
|
||||
let headers = {userId: 'userId'};
|
||||
layuiFileUpload.initAppReleaseUploadFile(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|-------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 |
|
||||
|
||||
### 上传视频
|
||||
|
||||
#### 后台
|
||||
|
||||
```js
|
||||
layuiFileUpload.initUploadVideo(fieldName, fileCount);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|----------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
|
||||
#### H5端，校验token
|
||||
|
||||
```js
|
||||
let headers = {token: 'token'};
|
||||
layuiFileUpload.initAppUploadVideo(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 |
|
||||
|
||||
#### H5端，校验userId
|
||||
|
||||
```js
|
||||
let headers = {userId: 'userId'};
|
||||
layuiFileUpload.initAppReleaseUploadVideo(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|-------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 |
|
||||
|
||||
### 上传音频
|
||||
|
||||
#### 后台
|
||||
|
||||
```js
|
||||
layuiFileUpload.initUploadAudio(fieldName, fileCount);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|----------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
|
||||
#### H5端，校验token
|
||||
|
||||
```js
|
||||
let headers = {token: 'token'};
|
||||
layuiFileUpload.initAppUploadAudio(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 |
|
||||
|
||||
#### H5端，校验userId
|
||||
|
||||
```js
|
||||
let headers = {userId: 'userId'};
|
||||
layuiFileUpload.initAppReleaseUploadAudio(fieldName, fileCount, headers);
|
||||
```
|
||||
|
||||
参数
|
||||
|
||||
| 名称 | 类型 | 描述 | 是否必填 |
|
||||
|-----------|--------|-------------------------------|------|
|
||||
| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 |
|
||||
| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 |
|
||||
| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 |
|
||||
Loading…
Reference in New Issue
Block a user