UIkit3.x文档

上传

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

用法

这个JavaScript组件使用了最新的XMLHttpRequest Level 2规范,并提供了跟踪上传进度的通过Ajax上传文件的功能。本组件提供了两种上传文件的方式:selectdrop. While the 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>
    

JavaScript

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

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

组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多

Option Value Default Description
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 期望的响应数据类型
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 组件的内容。

初始化

UIkit.upload(element, options);

事件

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

Name Description
upload 上传文件之前触发。