上传

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

用法

此 JavaScript 组件使用最新的 XMLHttpRequest 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-all`	函数		completeAll 回调。
`error`	函数		错误回调。
`load`	函数		加载回调。
`load-end`	函数		loadEnd 回调。
`load-start`	函数		loadStart 回调。
`progress`	函数		进度回调。
`fail`	函数		失败回调。如果名称或 MIME 类型无效。

JavaScript

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

初始化

UIkit.upload(element, options);

事件

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

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

文档

上传