上传

允许用户通过文件表单或占位符域来上传文件

用法

这个Javascript组件运用了最新的 XMLHttpRequest Level 2 规范,提供了通过包含上传进度条的Ajax进行文件上传追踪的功能。本组件提供了两种上传文件的方式: selectdropselect 请求只能被用在<input type="file"> 元素中,而 drop基本可以用在任何元素,通过从桌面将文件拖拽到指定元素就能轻松实现上传。记住,本组件并不在服务器上处理文件上传。

注意 使用此组件需要额外添加 upload.css 文件,在css/components文件夹中。此组件需要额外添加 upload.js 文件,在js/components文件夹中。

上传组件需要根据你的要求单独进行实施。在我们的例子中,我们使用占位符文件表单,同时使用了dropselect请求。另外,还是用了进度条来显示上传进度。

Example

Markup

<div id="upload-drop" class="uk-placeholder">
    Info text... <a class="uk-form-file">Select a file<input id="upload-select" type="file"></a>.
</div>

<div id="progressbar" class="uk-progress uk-hidden">
    <div class="uk-progress-bar" style="width: 0%;">...</div>
</div>

JavaScript

为了创建 selectdrop 上传监听器,你需要使用目标元素和选项来实例化每个上传class,以定义回调和其他有用的设置。

<script>

    $(function(){

        var progressbar = $("#progressbar"),
            bar         = progressbar.find('.uk-progress-bar'),
            settings    = {

            action: '/', // 上传路径 url

            allow : '*.(jpg|jpeg|gif|png)', // 只允许上传图片

            loadstart: function() {
                bar.css("width", "0%").text("0%");
                progressbar.removeClass("uk-hidden");
            },

            progress: function(percent) {
                percent = Math.ceil(percent);
                bar.css("width", percent+"%").text(percent+"%");
            },

            allcomplete: function(response) {

                bar.css("width", "100%").text("100%");

                setTimeout(function(){
                    progressbar.addClass("uk-hidden");
                }, 250);

                alert("Upload Completed")
            }
        };

        var select = UIkit.uploadSelect($("#upload-select"), settings),
            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    });

</script>

JavaScript 选项

选项 可用值 默认值 描述
action string '' 上传的目标URL
single boolean true 逐一进行文件发送
param string files[] 传递查询名称
params JSON Object {} 额外的请求参数
allow string . 文件过滤器
filelimit integer false 文件上传数量限制
type (text | json) text 来自服务器的响应类型

回调事件

名称 参数
before settings, files
beforeAll files
beforeSend xhr
progress percent
complete response, xhr
allcomplete response, xhr
notallowed file, settings
loadstart event
load event
loadend event
error event
abort event
readystatechange event