上傳 · UIkit 中文文檔

# 上傳允許用戶通過文件表單或占位符域來上傳文件 ## 用法這個Javascript組件運用了最新的 XMLHttpRequest Level 2 規范，提供了通過包含上傳進度條的Ajax進行文件上傳追蹤的功能。本組件提供了兩種上傳文件的方式： `select` 和 `drop`。 `select` 請求只能被用在`<input type="file">` 元素中，而 `drop`基本可以用在任何元素，通過從桌面將文件拖拽到指定元素就能輕松實現上傳。記住，本組件并不在服務器上處理文件上傳。注意使用此組件需要額外添加 `upload.css` 文件，在`css/components`文件夾中。此組件需要額外添加 `upload.js` 文件，在`js/components`文件夾中。上傳組件需要根據你的要求單獨進行實施。在我們的例子中，我們使用[占位符](placeholder.html)和[文件表單](form-file.html)，同時使用了`drop` 和 `select`請求。另外，還是用了[進度條](progress.html)來顯示上傳進度。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f429fd22.jpg) ### 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 | 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 |