JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　jQuery Ajaxでフォームをsubmitする方法
HTMLに次のような入力フォームががあります。
　<form id="myForm" enctype="multipart/form-data" method="post">
　　<input type="text" id="id_email"/>
　　<input type="file" id="id_file" />
　　<input type="button" id="id_submit" value="submit"/>
　</form>
通常だと、emailの内容をAjaxのPOSTパラメータに乗せて、
$(function(){
　　//送信ボタンクリック時の処理
　　$("#id_submit").click(function () {
　　　　//emailセレクタを取得
　　　　var email = $('#id_email').val();

　　　　var param = "email=" + email;　　//リクエストパラメータ
　　　　//Ajax実行
　　　　$.ajax({
　　　　　url : "url",　　　//実行するサーブレット
　　　　　dataType: "html",
　　　　　type : "post",
　　　　　data: param,　　　　// POSTパラメータ(name=value)
　　　　}).done(function(resData) {
　　　　　//成功時の処理
　　　　}).fail(function(resData) {
　　　　　//エラー時の処理
　　　　});
　　});
});
の様な指定が一般的です。
ただ、これだと textやradio,checkboxなどの要素のパラメータは問題ありませんが、
<input type="file" />要素のファイルデータは送信できません。
Ajaxでも、フォームのファイルデータを送る方法はないか調べたところ、
以下の方法で実現できました。


$(function(){
　　//送信ボタンクリック時の処理
　　$("#id_submit").click(function () {
　　　　//Formセレクタを取得
　　　　var form = $('#myForm').get(0);
　　　　//FormData オブジェクトを作成
　　　　var formData = new FormData( form );

　　　　//Ajax実行
　　　　$.ajax({
　　　　　url : "url",　　　//実行するサーブレット
　　　　　dataType: "html",
　　　　　type : "post",
　　　　　data : formData,　　// dataに FormDataを指定
　　　　　processData: false, 　　 //Ajaxがdataを整形しない指定
　　　　　contentType: false　　　//contentTypeもfalseに指定
　　　　}).done(function(resData) {
　　　　　//成功時の処理
　　　　}).fail(function(resData) {
　　　　　//エラー時の処理
　　　　});
　　});
});

この方法であれば、Ajaxでも通常のフォームのsubmitと同じ形式が
サーブレットに渡っていくため、ファイルデータも問題なく処理可能です。
<input type="file" />要素を持つフォームをAjaxでサーバーにPOSTして結果をブラウザに表示するサンプル
jpeg形式画像ファイルを指定してください。 
注）送信されたデータは、垂れ流しでサーバー側には一切保存していませんのでご安心を。
 
POST結果の画像表示エリア
jQuery/JavaScriptの小技集  Ajaxによるフォーム要素のPOST
HOME