上传

通过文件输入表单元素或占位符区域上传文件。

用法

此 JavaScript 组件利用最新的 XMLHttpRequest Level 2 规范，并提供通过 Ajax 上传文件的能力，包括跟踪上传进度。该组件提供了两种上传文件的方式：select 和 drop。虽然 select 请求只能应用于 <input type="file"> 元素，但您可以基本上将 drop 用于任何元素，这使您可以简单地将文件从桌面拖放到指定的元素中进行上传。请注意，此组件不处理服务器上的文件上传。

选择

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

<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>

拖放区域

此示例演示如何实现一个拖放区域，其中可以选择从文件窗口中选择文件。

通过将二进制文件拖放到此处或

选择一个来附加

<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>

上传监听器

要创建 select 和 drop 上传监听器，您需要使用目标元素和选项实例化每个上传类，这些选项定义回调和有用的设置。

<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>

组件选项

任何这些选项都可以应用于组件属性。用分号分隔多个选项。了解更多

选项	值	默认值	描述
`url`	字符串		请求 URL。
`multiple`	布尔值	`false`	允许上传多个文件。
`name`	字符串	`files[]`	名称参数。
`type`	字符串	`POST`	请求类型。
`params`	对象	`{}`	附加参数。
`allow`	字符串	`false`	文件名过滤器。(例如，*.png)
`mime`	字符串	`false`	文件 MIME 类型过滤器。(例如，image/*)
`concurrent`	数字	`1`	将同时上传的文件数。
`type`	字符串		预期响应数据类型 (xml, json, script, 或 html)
`method`	字符串	`POST`	请求方法
`msg-invalid-mime`	字符串	`文件类型无效: %s`	无效的 MIME 类型消息。
`msg-invalid-name`	字符串	`文件名无效: %s`	无效的名称消息。
`cls-dragover`	字符串	`uk-dragover`	文件名过滤器。
`abort`	函数		中止回调。
`before-all`	函数		beforeAll 回调。
`before-send`	函数		beforeSend 回调。
`complete`	函数		complete 回调。
`complete-all`	函数		completeAll 回调。
`error`	函数		error 回调。
`load`	函数		load 回调。
`load-end`	函数		loadEnd 回调。
`load-start`	函数		loadStart 回调。
`progress`	函数		progress 回调。
`fail`	函数		fail 回调。如果名称或 MIME 类型无效。

JavaScript

了解更多关于JavaScript 组件的信息。

初始化

UIkit.upload(element, options);

事件

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

名称	描述
`upload`	在文件上传之前触发。

文档

上传