Upload

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

用法

这个 JavaScript 组件基于最新的 XMLHttpRequest Level 2 规范，能够通过 Ajax 上传文件，并跟踪上传进度。该组件提供两种上传文件的方式：select 和 drop。select 方式只能应用于 <input type="file"> 元素，而 drop 方式基本上可用于任何元素，这让你可以简单地把文件从桌面拖放到指定元素中完成上传。请注意，该组件并不处理服务器端的文件上传。

Select

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

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

拖放区域

这个示例展示了如何实现一个拖放区域，同时可以从文件窗口中选择文件。

Attach binaries by dropping them here or

selecting one

<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 上传监听器，需要用目标元素和选项来实例化各自的 upload 类，选项用于定义回调和有用的设置。

<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`	String		发起请求的地址。
`multiple`	Boolean	`false`	是否允许一次上传多个文件。
`name`	String	`files[]`	上传时使用的名称参数。
`method`	String	`POST`	发起请求所用的方法类型。
`params`	Object	`{}`	随请求一并发送的附加参数。
`allow`	String	`false`	按文件名进行过滤，例如 .png。多个值之间用竖线分隔（.png\|*.gif）。
`mime`	String	`false`	按文件 MIME 类型进行过滤，例如 image/。多个值之间用竖线分隔（image/\|video/*）。
`maxSize`	Number	`0`	单个文件的最大体积，以 kB 为单位。
`concurrent`	Number	`1`	同时上传的文件数量。
`type`	String		期望的响应数据类型，可以是 xml、json、script 或 html。
`msg-invalid-mime`	String	`Invalid File Type: %s`	MIME 类型无效时的提示消息。
`msg-invalid-name`	String	`Invalid File Name: %s`	文件名无效时的提示消息。
`cls-dragover`	String	`uk-dragover`	文件名过滤器。
`abort`	Function		上传被中止时的 abort 回调。
`before-all`	Function		全部上传开始之前触发的 beforeAll 回调。
`before-send`	Function		每个文件发送之前触发的 beforeSend 回调。
`complete`	Function		单个文件上传完成时的 complete 回调。
`complete-all`	Function		全部上传结束时的 completeAll 回调。
`error`	Function		上传出错时的 error 回调。
`load`	Function		上传成功之后的 load 回调。
`load-end`	Function		单次上传结束时的 loadEnd 回调。
`load-start`	Function		单次上传开始时的 loadStart 回调。
`progress`	Function		上传进度发生变化时的 progress 回调。
`fail`	Function		fail 回调。当文件名或 MIME 类型无效时触发。

JavaScript

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

初始化

UIkit.upload(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

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

文档

Upload