本文へ移動

ファイルアップロード

概要

ファイルをアップロードする際に使用します。

展開例

テキストボタン

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

    <div class="fileSet">
<label for="XXXXX_N" class="fileUploadWrap mb-2">
<span>文言<input type="file" id="XXXXX_N" class="fileUploadBtn"></span>
</label>
<ul id="YYYYY_N" class="uploadFiles" aria-live="polite"></ul>
</div>

    改変対象ファイル

    CSS:
    _ul.scss 内に改変対象箇所があります。
    _ul.scssは、本番へは反映せずに、必要なUIのコードをmodules.scssに追加してください。
    Javascript:
    setUploadFile()関数
    必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。

    ボックスタイプ

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

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

      ※PNG/JPG形式
      ※8MB以下 

    <ul class="uploadList">
<li class="uploadBox">
<div class="pictEnptyBox">
<div class="note">
<p class="mb-2">画像を選択してください</p>
<p class="annotation font-sm">
<span id="file01Format" class="attention">※</span>PNG/JPG形式<br>
<span id="file01Size" class="attention">※</span>8MB以下
</p>
</div>
</div>
<label for="inputName" class="fileUploadCircle">
<span>画像添付<input type="file"
name="inputName"
id="inputName"
class="fileUploadBox"
accept="image/png,image/jpeg"
multiple
data-max-files="4" //最大画像枚数
data-max-size="8000000" //最大要領
aria-describedby="file01Format file01Size"
></span>
</label>
</li>
</ul>
    トリガー

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

    CLASS fileUploadBox
    ボタン

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

    CLASS fileUploadCircle
    表示領域

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

    CLASS uploadBox

    改変対象ファイル

    CSS:
    _ul.scss 内に改変対象箇所があります。
    _ul.scssは、本番へは反映せずに、必要なUIのコードをmodules.scssに追加してください。
    Javascript:
    fileUpLoadBox()関数 [insertPictBoxHtml() delPict() checkPictNum()]
    必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。

    ドラッグ&ドロップ

    <ul id="insertImg">ここに画像が出力されます。</ul>
<label for="inputPict" class="uploadArea"><p id="attentionText" class="text-center pDbTop">画像をこの領域に<br>ドロップしてください。</p>
<input
type="file"
multiple="multiple"
name="files[]"
id="inputPict"
class="fileUploadArea"
accept="image/*"
data-max-files="4"
data-max-size="8000000"
aria-describedby="attentionText">
</label>
    ドロップエリア

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

    CLASS uploadArea
    表示領域

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

    ID insertImg

    改変対象ファイル

    CSS:
    _ul.scss 内に改変対象箇所があります。
    _ul.scssは、本番へは反映せずに、必要なUIのコードをmodules.scssに追加してください。
    Javascript:
    dropUpload()関数 [photoPreview() ]
    必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。