添付ファイルアドオンの設置手順の解説

レスポンシブ・メールフォームに組み込むことができる「添付ファイルアドオン」の設置手順を解説します。
機能や価格などの詳細は「レスポンシブ・メールフォームの添付ファイルアドオンについて」のページをご覧ください。

このページの内容は上記アドオンに同梱されている「添付ファイルアドオンの設置手順.txt」と同じ内容になります。
購入を検討中の方が参考にできるよう公開いたしました。

設置手順

1、attachment.zipを展開します。

2、メールフォーム本体にあるaddonフォルダの中に、attachmentフォルダを入れます。

3、index.html内のform要素に、以下のようにenctype属性を追加する。

<form action="php/mailform.php" method="post" id="mail_form" enctype="multipart/form-data">

4、メールフォーム本体のindex.htmlに以下の2つのコードを追加します。
(index.htmlを、attachmentフォルダの中のindex(差し替え用).htmlと差し替えるだけでもOKです)

index.htmlのhead要素内に、以下のようにattachment.cssの読み込みを追加。

<link rel="stylesheet" type="text/css" href="addon/attachment/attachment.css" />

index.htmlのform要素内のdl要素の中に、以下のようにファイル添付用のdt要素とdd要素を追加。

<dt>添付ファイル<br />(複数選択NG)<span>Attachment File</span></dt>
<dd>
  <ul>
    <li><input type="hidden" id="max_file_size" name="MAX_FILE_SIZE" value="3000000" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
    <li><input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" /></li>
  </ul>
  <p>対応形式:jpg、png、gif</p>
</dd>

上のHTMLコードは1つのボタンにつき、1つのファイルを選択できるタイプとなります。
それに対し、下のHTMLコードでは1つのボタンで複数のファイルを選択することができます。(multiple=”multiple”が追加されています)

<dt>添付ファイル2<br />(複数選択OK)<span>Attachment File2</span></dt>
<dd class="required">
  <ul>
    <li><input type="hidden" id="max_file_size2" name="MAX_FILE_SIZE" value="3000000" /></li>
    <li><input type="file" id="attachment_2" name="attachment_2[]" multiple="multiple" accept="image/jpeg, image/png, image/gif" /></li>
  </ul>
  <p>対応形式:jpg、png、gif</p>
</dd>

5、ファイルのアップロードというものはデータ容量が大きく、そのぶんサーバに負荷がかかります。
上記手順4で追加したHTMLコードの中の、name=”MAX_FILE_SIZE”があるinput要素のvalueの値に、アップロードするファイルの最大容量を記入します。
(後述の補足説明も参照)

<input type="hidden" id="max_file_size" name="MAX_FILE_SIZE" value="3000000" />

初期状態である上のコードでは3000000バイト、つまり1つのファイルにつき約3MBまでが選択可能となります。

6、attachment-config.phpを開き、上記手順5と同じになるようにアップロードできるファイルサイズの上限を記入します。(後述の補足説明も参照)

$rm_upload_max_size = 3000000;

7、上記手順4で追加したHTMLコードの中の、accept属性に送信可能なファイル形式を記入します。(後述の補足説明も参照)

<input type="file" class="attachment" name="attachment[]" accept="image/jpeg, image/png, image/gif" />

jpgファイルは、image/jpeg
pngファイルは、image/png
gifファイルは、image/gif
zipファイルは、application/x-zip-compressed

と半角のコンマで区切って記入します。

8、attachment-config.phpを開き、上記手順7と同じになるように送信可能なファイル形式を1または0で指定します。
(許可する形式には1、許可しないものには0)
(後述の補足説明も参照)

$rm_jpg = 1;
$rm_png = 1;
$rm_gif = 1;
$rm_zip = 0;

設置は以上です。
実際にメールフォームに入力・ファイル指定をしてみて、ファイルが送信されるかを確認してみましょう。

補足説明や注意点

なぜ上記手順の5と6、7と8では、HTML側とPHP側の両方で同じ設定をしなければいけないかを説明しておきます。

添付ファイル機能というものは攻撃の的となりやすく、リスクの高い面があります。
例えば、容量の重いファイルを送ることでサーバをダウンさせたり、ウイルスを仕込んだ実行ファイルを送りつけたりすることもできます。

HTMLやJavaScript側の設定というものは、悪意ある攻撃者によっていくらでも偽装して送信することができてしまいます。
しかしHTMLやJavaScript側の設定がないと、「添付ファイルを送信(ページ移動が発生)してから、サイズ超過などのエラーが表示される」という事態になり、ユーザビリティ(使い勝手)が悪くなってしまうのです。

そのような理由から、受け付けるファイル形式や容量を、クライアント側(HTML)だけでなくサーバ側(PHP)でも制限をしておく必要があるのです。
二度手間になりますが、HTML側とPHP側両方での設定をお願いいたします。

添付ファイル機能はセキュリティ面でのリスクが増し、サーバにかかる負荷も増えるため、正確に、そして厳しめに設定をするほうが無難です。

サポートについて

このアドオンには設置メールサポートが付属しています。
設置方法でご不明な点があったり、カスタマイズしていない初期状態なのに正常に動作しないような場合は、サポートBBSまたはお問い合わせページからお問い合わせください。

カスタマイズに関しては別途料金が発生いたしますので、ご了承ください。

サポートBBS

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+