# 上传 允许用户通过文件表单或占位符域来上传文件 ## 用法 这个Javascript组件运用了最新的 XMLHttpRequest Level 2 规范，提供了通过包含上传进度条的Ajax进行文件上传追踪的功能。本组件提供了两种上传文件的方式： `select` 和 `drop`。 `select` 请求只能被用在`&lt;input type="file"&gt;` 元素中，而 `drop`基本可以用在任何元素，通过从桌面将文件拖拽到指定元素就能轻松实现上传。记住，本组件并不在服务器上处理文件上传。 注意 使用此组件需要额外添加 `upload.css` 文件，在`css/components`文件夹中。此组件需要额外添加 `upload.js` 文件，在`js/components`文件夹中。 上传组件需要根据你的要求单独进行实施。在我们的例子中，我们使用[占位符](placeholder.html)和[文件表单](form-file.html)，同时使用了`drop` 和 `select`请求。另外，还是用了[进度条](progress.html)来显示上传进度。 ### 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 为了创建 `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 &#124; 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 |