アップロード

ファイル入力フォーム要素またはプレースホルダー領域からファイルをアップロードします。

使用法

このJavaScriptコンポーネントは、最新のXMLHttpRequest Level 2仕様を利用し、アップロードの進行状況の追跡を含め、Ajax経由でファイルをアップロードする機能を提供します。このコンポーネントは、selectとdropの2つのファイルアップロード方法を提供します。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>

ドロップ領域

この例は、ファイルウィンドウからファイルを選択するオプションを使用して、ドロップ領域を実現する方法を示しています。

ここにバイナリをドロップするか、
1つ選択してください

<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`	文字列		リクエストURL。
`複数`	ブール値	`false`	複数のファイルのアップロードを許可します。
`名前`	文字列	`files[]`	nameパラメーター。
`タイプ`	文字列	`POST`	リクエストタイプ。
`params`	オブジェクト	`{}`	追加のパラメーター。
`許可`	文字列	`false`	ファイル名フィルター。(例: *.png)
`mime`	文字列	`false`	ファイルMIMEタイプフィルター。(例: image/*)
`同時`	数値	`1`	同時にアップロードされるファイルの数。
`タイプ`	文字列		予期されるレスポンスデータ型 (xml, json, script, html)
`メソッド`	文字列	`POST`	リクエストメソッド
`msg-invalid-mime`	文字列	`無効なファイルタイプ: %s`	無効なMIMEタイプメッセージ。
`msg-invalid-name`	文字列	`無効なファイル名: %s`	無効な名前のメッセージ。
`cls-dragover`	文字列	`uk-dragover`	ファイル名フィルター。
`中止`	関数		中止コールバック。
`before-all`	関数		beforeAllコールバック。
`before-send`	関数		beforeSendコールバック。
`完了`	関数		完了コールバック。
`complete-all`	関数		completeAllコールバック。
`エラー`	関数		エラーコールバック。
`読み込み`	関数		読み込みコールバック。
`load-end`	関数		loadEndコールバック。
`load-start`	関数		loadStartコールバック。
`プログレス`	関数		プログレスコールバック。
`失敗`	関数		失敗コールバック。名前またはMIMEタイプが無効な場合。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.upload(element, options);

イベント

このコンポーネントがアタッチされた要素で、次のイベントがトリガーされます。

名前	説明
`upload`	ファイルがアップロードされる前に発生します。

ドキュメント

アップロード