ファイル添付

本ページでは、ファイル添付を受け付けるフォームを実装する方法について解説します。

準備

ファイル添付を受け付ける場合、フォームごとに管理画面から事前の準備が必要です。以下の手順で行なって下さい。

管理画面にログインして [フォーム] をクリックします。
リストボックスから対象となるフォームを選択します。
[通知メール]タブをクリックします。
画面最下部にある「添付ファイルを送信する」のチェックボックスをONにします。
[変更を保存]をクリックします。

以上の準備が整いました。フォームでファイル添付を受け付けると、通知メールに当該ファイルが添付されて送信されます。

実装

通常のフォームと同じ様に <form> 内に <input type="file"> でファイル添付項目を記述して下さい。以下は最低限の例です。

<form class="espf">
...(省略)...
    <div>
        <label for="file">申込書ファイル</label>
        <input type="file" name="file">
    </div>
...(省略)...
</form>

上記のコードでファイル添付を受け付けることはできますが、espar form では添付ファイルに関する様々な制限/制約を設けることができます。

ファイル添付のバリデーション

ファイルサイズやファイル数の制限など、ファイル添付に特化した高度なバリデーション機能が用意されています。添付されるファイルに何らかの制限を設けたい場合に使用して下さい。

maxfiles: ファイル数を制限する
maxsize: ファイルサイズを制限する
fileext: ファイル拡張子を限定する
filetype: ファイルの種類を限定する

詳細は、ファイル添付のバリデーション仕様一覧を参照してください。使用例は、実装サンプル - バリデーションとエラー表示のページをご覧下さい。いくつかの例を以下に示します。

例1: 複数ファイルのアップロード制限

<div>
    <label for="documents">添付書類（最大3ファイルまで）</label>
    <input type="file" name="documents" multiple class="espf-maxfiles-3">
    <div class="espf-e-documents-maxfiles">添付できるファイルは最大3つまでです</div>
</div>

例2: ファイル形式の制限

<div>
    <label for="photo">写真（JPG、PNG形式のみ）</label>
    <input type="file" name="photo" class="espf-fileext-jpg_png_gif">
    <div class="espf-e-photo-fileext">拡張子が .jpg か .png のファイルのみアップロード可能です</div>
</div>