Question

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

用法

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

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

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

<div class="uk-placeholder">
    Info text... <a class="uk-form-file">Select a file<input type="file"></a>.
</div>
<div class="uk-progress uk-hidden">
    <div class="uk-progress-bar" style="width: 0%;">...</div>
</div>

JavaScript

为了创建 select 和 drop 上传监听器，你需要使用目标元素和选项来实例化每个上传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