上傳

透過檔案輸入表單元素或佔位區域上傳檔案。

用法

這個 JavaScript 元件利用最新的 XMLHttpRequest Level 2 規範，並提供透過 Ajax 上傳檔案的功能，包括追蹤上傳進度。此元件提供兩種上傳檔案的方式：select 和 drop。雖然 select 請求只能應用於 <input type="file"> 元素，但您基本上可以使用任何帶有 drop 的元素，這使您可以簡單地將檔案從桌面拖放到指定的元素中進行上傳。請注意，此元件不處理伺服器上的檔案上傳。

選擇

在此範例中，我們使用一個簡單的按鈕來開啟檔案選擇視窗。

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

拖放區域

此範例展示如何實現一個拖放區域，並提供從檔案視窗中選擇檔案的選項。

透過將二進位檔案拖放到此處或

選擇一個

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

上傳監聽器

若要建立 select 和 drop 上傳監聽器，您需要使用目標元素和選項來實例化每個上傳類別，這些選項定義回呼和有用的設定。

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

元件選項

任何這些選項都可以應用於元件屬性。用分號分隔多個選項。瞭解更多

選項	值	預設	描述
`url`	字串		請求網址。
`multiple`	布林值	`false`	允許上傳多個檔案。
`name`	字串	`files[]`	名稱參數。
`type`	字串	`POST`	請求類型。
`params`	物件	`{}`	其他參數。
`allow`	字串	`false`	檔案名稱篩選器。（例如 *.png）
`mime`	字串	`false`	檔案 MIME 類型篩選器。（例如 image/*）
`concurrent`	數字	`1`	同時上傳的檔案數量。
`type`	字串		預期的回應資料類型（xml、json、script 或 html）
`method`	字串	`POST`	請求方法
`msg-invalid-mime`	字串	`無效的檔案類型：%s`	無效的 MIME 類型訊息。
`msg-invalid-name`	字串	`無效的檔案名稱：%s`	無效的名稱訊息。
`cls-dragover`	字串	`uk-dragover`	檔案名稱篩選器。
`abort`	函式		中止回呼。
`before-all`	函式		beforeAll 回呼。
`before-send`	函式		beforeSend 回呼。
`complete`	函式		complete 回呼。
`complete-all`	函式		completeAll 回呼。
`error`	函式		錯誤回呼。
`load`	函式		載入回呼。
`load-end`	函式		loadEnd 回呼。
`load-start`	函式		loadStart 回呼。
`progress`	函式		進度回呼。
`fail`	函式		失敗回呼。如果名稱或 MIME 類型無效。

JavaScript

深入瞭解JavaScript 元件。

初始化

UIkit.upload(element, options);

事件

下列事件將在附加此元件的元素上觸發

名稱	描述
`upload`	在檔案上傳之前觸發。

文件

上傳