デザインシステム ケイツー・インタラクティブ

テキストボタン

IDとFORのXXXXXはセットになっている必要があります。また_Nはページ内で複数個配置する際に、グループを確定させる値となります。Nにユニークな数字、もしくは英数字をいれてください。YYYYYは任意の文字列（英字で始まる英数字）で大丈夫です。

<div class="fileSet">
<label for="XXXXX_N" class="fileUploadWrap mMinBottom">
<span>文言<input type="file" id="XXXXX_N" class="fileUploadBtn"></span>
</label>
<ul id="YYYYY_N" class="uploadFiles"></ul>
</div>

ボックスタイプ

複数の画像を確認しながらアップロードする際に使用します。

• 画像を選択してください

  ※PNG/JPG形式
  ※8MB以下

  画像添付

<ul class="pictList">
<li class="uploadBox">
<div class="pictEnptyBox">
<div class="note">
<p class="mMinBottom">画像を選択してください</p>
<p class="annotation fontSmall">
<span class="attention">※</span>PNG/JPG形式<br>
<span class="attention">※</span>8MB以下
</p>
</div>
</div>
<label for="inputName" class="fileUploadCircle">
<span>画像添付<input type="file" data-max="4" name="inputName" id="inputName" class="fileUploadBox"></span>
</label>
</li>
</ul>

トリガー

クリックした際、イベントを発生させます。

CLASS	fileUploadBox

ボタン

input[type=file]をボタンに変更させます。

CLASS	fileUploadCircle

表示領域

アップロードさせるグレー枠です。

CLASS	uploadBox

ドラッグ&ドロップ

<ul id="insertImg">ここに画像が出力されます。</ul>
<label for="inputPict" class="uploadArea"><p class="tCenter pDbTop">画像をこの領域に<br>ドロップしてください。</p>
<input type="file" multiple="multiple"  name="files[]" id="inputPict" class="fileUploadArea">
</label>

ドロップエリア

アップロードしたい画像をドロップする領域です。

CLASS	uploadArea

表示領域

画像が表示される領域です。

ID	insertImg