上传
最后更新于：2022-04-01 22:23:58
# 上传
允许用户通过文件表单或占位符域来上传文件
## 用法
这个Javascript组件运用了最新的 XMLHttpRequest Level 2 规范，提供了通过包含上传进度条的Ajax进行文件上传追踪的功能。本组件提供了两种上传文件的方式： `select` 和 `drop`。 `select` 请求只能被用在`<input type="file">` 元素中，而 `drop`基本可以用在任何元素，通过从桌面将文件拖拽到指定元素就能轻松实现上传。记住，本组件并不在服务器上处理文件上传。
注意 使用此组件需要额外添加 `upload.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `upload.js` 文件，在`js/components`文件夹中。
上传组件需要根据你的要求单独进行实施。在我们的例子中，我们使用[占位符](placeholder.html)和[文件表单](form-file.html)，同时使用了`drop` 和 `select`请求。另外，还是用了[进度条](progress.html)来显示上传进度。
### Example
### Markup
```
```
* * *
### JavaScript
为了创建 `select` 和 `drop` 上传监听器，你需要使用目标元素和选项来实例化每个上传class，以定义回调和其他有用的设置。
```
```
* * *
## JavaScript 选项
| 选项 | 可用值 | 默认值 | 描述 |
| --- | --- | --- | --- |
| `action` | string | '' | 上传的目标URL |
| `single` | boolean | true | 逐一进行文件发送 |
| `param` | string | files[] | 传递查询名称 |
| `params` | JSON Object | {} | 额外的请求参数 |
| `allow` | string | *.* | 文件过滤器 |
| `filelimit` | integer | false | 文件上传数量限制 |
| `type` | (text | json) | text | 来自服务器的响应类型 |
### 回调事件
| 名称 | 参数 |
| --- | --- |
| `before` | settings, files |
| `beforeAll` | files |
| `beforeSend` | xhr |
| `progress` | percent |
| `complete` | response, xhr |
| `allcomplete` | response, xhr |
| `notallowed` | file, settings |
| `loadstart` | event |
| `load` | event |
| `loadend` | event |
| `error` | event |
| `abort` | event |
| `readystatechange` | event |
';
Info text... Select a file.