Movable Type 備忘録

メールフォームにファイルアップロード機能を付ける

Jun032007
Author: bzbell
Categories: Customize
Tags: Customize, File Upload, MailForm, MovableType

Next Page: CSSでバーグラフ表示
Prev Page: MTRelativePathプラグイン

こんにちわ^^

訪問者さんとの質問のやりとりで、コメント内容だけでは分からないことがあって、実際にテンプレートやスクリプトを見れば解決しそうなことが多々あります。

そんな時メールフォームにファイルのアップロード機能あったらいいなぁ･･･と以前から思ってたものの、複数のファイルをアップロードしたい場合だと中々うまくいかなくて諦めてました。

先日も訪問者さんがカスタマイズしたファイルを見させてもらう機会があったので、やっぱりアップロード機能欲しいな･･･ということで、昨日からいろいろ試行錯誤してやっと、複数ファイルのアップロードができるようになりました (;￣∇￣A ふぅ

ということで、今回はメールフォームにファイルのアップロード機能を付けるカスタマイズのご紹介です。

今回わたしがカスタマイズしたファイルのアップロードは、メールに添付するのではなく、Gmailのようにファイル選択したら非同期でアップロードして、そのアップロード先のURLをメールに記載するようにしました。

これにより複数のファイル(URL)をメールといっしょに転送することができます。
サンプル：メールフォーム

非同期といっても Ajax を使用するわけではなく、iframe を使って行っています。
参考：IFRAMEを使って非同期にファイルをアップロードするサンプル

今までは Ajax を使って非同期でファイルアップロードしようとしてたのですが、どうやら、<input type="file">によるファイル送信を Ajax ではできないようなんです。
だから、以前 TRY したときもダメだったみたい。

なぜダメだったのか原因が分かってよかったです (●´∀｀●)

ちなみに、わたしのサイトのメールフォームは、以下のカスタマイズがされています。

まだメールフォームを作ってない人は、上記を参考に作るといいかも、です (￣∇￣)b
また、今回のカスタマイズでは、上記カスタマイズに関係なく行えますが、ブログの PHP 化を行っていることが前提となります。

ディレクトリ構成

今回行ったカスタマイズのディレクトリ構成を以下に記します。

http://●●●.com/
 +--- index.html
 |
 +--- archives/
 |    |    +--- mailform.php     <-- メールフォーム
 |    |
 |    +--- upload/
 |    |    +--- class.upload.php
 |    |    |
 |    |    +--- temp/            <-- アップロード先一時ディレクトリ
 |    |

ここでは上記のようなディレクトリ構成として説明していきます。各自の環境に合わせて、その都度読み替えてください。

カスタマイズ

まず、ファイルアップロード用のスクリプトを入手します。
こちらのclass.upload.php - verot.netさんから class.upload.php をダウンロードしてください。

そして適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードしてください。
次にメールフォームのテンプレートを変更します。
以下にその内容を記します。
アップロード処理部
1. <?php
2. // ページがロードされた条件をチェックします
3. // フォームから「Upload」ボタンがクリックされた場合に限り、以下を処理します
4. if (!array_key_exists('action', $_POST) || 'simple' == $_POST['action'])
5. {
6. // アップロード用のライブラリをロードします
7. include('./upload/class.upload.php');
8. // メールフォームに設置した、ファイルのパス情報を元にしたインスタンス生成
9. $handle = new upload($_FILES['file']);
11. if ($handle->uploaded)
12. {
13. // アップロード可能な最大ファイルサイズ設定(Default: 50KB)
14. $handle->file_max_size = 51200;
16. // ファイル・アップロードを開始します
17. // アップロード先は指定パス(URLではありません)になります
18. $handle->process('./upload/temp/');
20. echo '<html><head><title>-</title></head><body>';
21. echo '<script type="text/javascript">' . "\n";
22. echo 'var parDoc = window.parent.document;';
23. // メッセージ出力先を指定します
24. echo 'var mail_text = parDoc.getElementById("mail_text");';
26. if ($handle->processed)
27. {
28. // 正常にアップロードできた場合、ファイルサイズやアップロードした URL を出力します
29. echo 'mail_text.value += "\nlink to the file just uploaded(' . round(filesize($handle->file_dst_pathname)/256)/4 . 'kb): <$MTBlogArchiveURL$>upload/temp/' . $handle->file_dst_name . '\n\n";';
30. }
31. else
32. {
33. // 何らかのエラーが発生した場合、エラーメッセージを出力します
34. echo 'mail_text.value += "\nfile not uploaded to the wanted location. Error: ' . $handle->error . '\n\n";';
35. }
37. // 選択されたファイル・パスをクリアします
38. echo 'parDoc.getElementById("file").value = "";';
39. echo "mail_text.focus();\n</script></body></html>";
40. exit();
41. }
42. }
43. ?>
上記コードをメールフォーム用のテンプレートの1行目に追加します。
青い字の部分は、class.upload.php へのパス、ファイルの転送先ディレクトリのパスを指定します。URL ではありませんので注意してください。

上記ディレクトリ構成だと、メールフォーム(mailform.php)がある場所からの相対パスで指定しています。
絶対パスの場合は、/home/●●●/▲▲▲/www/～のように指定します。

赤い字の部分は、メールフォームに追加する、ファイル選択フィールドのタグIDになります。
緑の字の部分は、アップロード可能とするファイルの最大サイズを指定します。

そしてピンクの字の部分は、アップロード結果を表示するタグIDを指定しています。
次にフォームに、ファイル選択機能を追加します。
以下はわたしのサイトで実際に使っているフォームの XHTML になります。
メールフォーム
1. <div id="mailform-container">
2. <div id="mailform_block">
3. <form method="post" action="<?=$PHP_SELF?>" target="upload_iframe" id="mailform" enctype="multipart/form-data">
4. <div id="mailform-open-content">
5. <div id="mailform-open-data">
6. <fieldset>
7. <input type="hidden" name="mail_post_template" id="mail_post_template" value="Mailform: Complete" />
8. <input type="hidden" name="mail_preview_template" id="mail_preview_template" value="Mailform: Preview" />
9. <input type="hidden" name="mail_error_template" id="mail_error_template" value="Mailform: Error" />
10. <input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
11. <-- 通常ファイルのアップロードの場合 -->
12. <input type="hidden" name="action" value="simple" />
13. <MTIgnore>
14. <-- イメージファイルのアップロードの場合 -->
15. <input type="hidden" name="action" value="image" />
16. </MTIgnore>
17. <input type="hidden" name="max_file_size" value="51200">
19. <p><label for="mail_author">Your Name:* </label><input id="mail_author" type="text" size="30" name="mail_author" /></p>
20. <p><label for="mail_email">Your Mail Address:* </label><input id="mail_email" type="text" size="30" name="mail_email" /></p>
21. <p><label for="mail_subject">Subject: </label><input id="mail_subject" type="text" size="30" name="mail_subject" /></p>
22. <p><label for="mail_text">Text:* </label><textarea id="mail_text" rows="10" cols="50" name="mail_text"></textarea></p>
23. <p><label for="mail_file">File Upload: </label><input id="file" type="file" size="40" name="file" /></p>
24. </fieldset>
25. </div>
27. <div id="mailform-open-footer">
28. <fieldset>
29. <input type="submit" id="mail_preview" value="Preview" onclick="return ajax_preview();" />
30. <input type="submit" id="mail_post" value="Post" onclick="return ajax_post();" />
31. <input type="submit" id="file_upload" name="file_upload" value="Upload" onchange="js_upload(this);" />
32. </fieldset>
33. </div>
34. </div>
35. </form>
36. </div>
38. <iframe name="upload_iframe" style="display:none;"></iframe>
39. <img id="progress" style="display:none;" src="<$MTBlogURL$>mt-memo/foryou001-black/ajax-loader.gif" alt="Loading..." />
40. <div id="mail_result"></div>
42. <script type="text/javascript">
43. function js_upload(upload_field)
44. {
45. upload_field.form.submit();
46. return true;
47. }
48. </script>
49. </div>
赤い字の部分を今回のカスタマイズで追加したところになります。
青い字の部分は iframe のタグ名称です。

緑の字の部分は、ファイル選択後、自分自身(メールフォームのページ)にフォームの内容を転送することで、アップロード処理を行わせています。

ピンクの字は、アップロード結果の出力先です。
わたしの場合は、アップロード結果を <textarea> 内に出力するようにしました。
一通り変更したら保存して再構築します。
そして、アップロード確認を行ってください。