上传／Upload

# 上传／Upload

<p class="uk-text-lead">通过文件上传表单元素或占位符区域来上传文件。</p>

## Usage-用法

T这个JavaScript组件使用了最新的XMLHttpRequest Level 2规范，并提供了跟踪上传进度的通过Ajax上传文件的功能。本组件提供了两种上传文件的方式： `select` 和 `drop`。 `select` 请求只能应用于 `<input type="file">` 元素，而 `drop`本上可以与任何元素一起使用，这使您可以将文件从桌面直接拖放到指定的元素中就可以上传。注意，本组件并不能处理服务端的文件上传功能。

***

## Select

在此示例中，我们使用一个简单的按钮打开文件选择窗口。

```example
<div class="js-upload" uk-form-custom>
    <input type="file" multiple>
    <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
</div>
```

***

## Drop area-拖放区域

本示例展示了如何实现带有文件选择框的拖放区域。

```example
<div class="js-upload uk-placeholder uk-text-center">
    <span uk-icon="icon: cloud-upload"></span>
    <span class="uk-text-middle">Attach binaries by dropping them here or</span>
    <div uk-form-custom>
        <input type="file" multiple>
        <span class="uk-link">selecting one</span>
    </div>
</div>

<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>

<script>

    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '',
        multiple: true,

        beforeSend: function () {
            console.log('beforeSend', arguments);
        },
        beforeAll: function () {
            console.log('beforeAll', arguments);
        },
        load: function () {
            console.log('load', arguments);
        },
        error: function () {
            console.log('error', arguments);
        },
        complete: function () {
            console.log('complete', arguments);
        },

        loadStart: function (e) {
            console.log('loadStart', arguments);

            bar.removeAttribute('hidden');
            bar.max = e.total;
            bar.value = e.loaded;
        },

        progress: function (e) {
            console.log('progress', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        loadEnd: function (e) {
            console.log('loadEnd', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        completeAll: function () {
            console.log('completeAll', arguments);

            setTimeout(function () {
                bar.setAttribute('hidden', 'hidden');
            }, 1000);

            alert('Upload Completed');
        }

    });

</script>

```

***

## JavaScript

要创建 `select` 和 `drop` 上传监听器，必须实例化每个定义了回调和其他设置的上传类以及目标元素和选项。

```html
<script>

    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '',
        multiple: true,

        beforeSend: function (environment) {
            console.log('beforeSend', arguments);
            
            // The environment object can still be modified here. 
            // var {data, method, headers, xhr, responseType} = environment;
            
        },
        beforeAll: function () {
            console.log('beforeAll', arguments);
        },
        load: function () {
            console.log('load', arguments);
        },
        error: function () {
            console.log('error', arguments);
        },
        complete: function () {
            console.log('complete', arguments);
        },

        loadStart: function (e) {
            console.log('loadStart', arguments);

            bar.removeAttribute('hidden');
            bar.max = e.total;
            bar.value = e.loaded;
        },

        progress: function (e) {
            console.log('progress', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        loadEnd: function (e) {
            console.log('loadEnd', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        completeAll: function () {
            console.log('completeAll', arguments);

            setTimeout(function () {
                bar.setAttribute('hidden', 'hidden');
            }, 1000);

            alert('Upload Completed');
        }

    });

</script>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项             | 可用值    | 默认值                 | 描述                                                 |
|:-------------------|:---------|:------------------------|:-----------------------|
| `url`              | String   | `''`                    | 请求的URL                 |
| `multiple`         | Boolean  | `false`                 | 允许上传多个文件    |
| `name`             | String   | `files[]`               | name参数         |
| `type`             | String   | `POST`                  | 请求类型       |
| `params`           | Object   | `{}`                    | 附加参数           |
| `allow`            | String   | `false`                 | 文件名过滤器。（例如*.png）     |
| `mime`             | String   | `false`                 | 文件MIME类型过滤器。（例如images/*）  |
| `concurrent`       | Number   | `1`                     | 同时可上传的文件数。  |
| `type`             | String   | ``                      | 期望的 [响应数据类型](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType) |
| `method`           | String   | `POST`                  | 请求方法 |
| `msg-invalid-mime` | String   | `Invalid File Type: %s` | 无效的MIME类型消息。                      |
| `msg-invalid-name` | String   | `Invalid File Name: %s` | 无效的名称消息。           |
| `cls-dragover`     | String   | `uk-dragover`           | 文件名过滤器。            |
| `abort`            | Function | `null`                  | abort 回调               |
| `before-all`       | Function | `null`                  | beforeAll 回调       |
| `before-send`      | Function | `null`                  | beforeSend 回调    |
| `complete`         | Function | `null`                  | complete 回调         |
| `complete-all`     | Function | `null`                  | completeAll回调       |
| `error`            | Function | `null`                  | error回调           |
| `load`             | Function | `null`                  | load回调    |
| `load-end`         | Function | `null`                  | loadEnd回调  |
| `load-start`       | Function | `null`                  | loadStart回调   |
| `progress`         | Function | `null`                  | progress回调    |
| `fail`             | Function | `alert`                 | fail回调。如果名称或MIME类型无效。  |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.upload(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name | 描述 |
| --- | --- |
| `upload` | 上传文件之前触发。 |