Subscribed unsubscribe Subscribe Subscribe

jQuery Form Pluginの解説と画像のAJAXアップロード

開発 Javascript Web


ExtJSの勉強もしてるんですがね、jQueryの方が楽ちんすぎて今でも使っているんです。


jQueryでは.load()とか.post()とか.get()とか書けば簡単にAJAXが書けますが、フォームをAJAXで扱いたい場合は「jQuery Form Plugin」を使うわけです。
これを使えばAJAXフォームの送信もカンタンカンタン。

APIリファレンスを日本語で書いたので覚え書きに載せときます。
って言っても、たいした量でもないので、いまいち分からなかったらプラグインファイルを見た方が早いですよー。

jQuery Form Plugin のAPI

■ ajaxForm()

AJAX処理したい任意のフォームを設定します。
詳細についてオプション値を設定することも出来ます(オプションについては下の方に)。
Chainable: Yes.

//オプション値なし
$('#myFormId').ajaxForm();
//オプション値あり
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php'
}; 
$('#myFormId').ajaxForm(options);
■ ajaxSubmit

AJAX処理したい任意のフォームのsubmitにAJAXイベントをハンドリングします。
ajaxForm()と同様にオプションを設定できます(オプションについては下の方に)。
Chainable: Yes.

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});
■ formSerialize

フォームのデータをjQueryのAJAX APIで利用可能な文字列のデータにシリアライズします(name1=value1&name2=value2)。
Chainable: No, this method returns a String.

var queryString = $('#myFormId').formSerialize();  
// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.php', queryString);
■ fieldSerialize

指定したフィールドのみをjQueryのAJAX APIで利用可能な文字列のデータにシリアライズします(name1=value1&name2=value2)。
Chainable: No, this method returns a String.

var queryString = $('#myFormId .specialFields').fieldSerialize();
■ fieldValue

指定したフィールドの入力値(value)を配列で取得します。
Chainable: No, this method returns an array.

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]); 
■ resetForm

指定したフォームのデータをリセットします。
Chainable: Yes.

$('#myFormId').resetForm();
■ clearForm

指定したフォームのデータをクリアします。
resetFormとの違いは、resetFormの場合フォームの入力項目をデフォルト値にしますが、clearFormの場合フォームの入力項目を空白にします。
Chainable: Yes.

$('#myFormId').clearForm();
■ clearFields

指定したフィールドの値をクリアします。
Chainable: Yes.

$('#myFormId .specialFields').clearFields();

ajaxForm と ajaxSubmit のオプション値について

■ target

リクエスト後のサーバからの戻りを出力する場所を指定します。
jQueryオブジェクトやDOM要素で指定します。

■ url

フォームデータを送信するURLを設定できます。
デフォルトではactionで設定したURLになっています。

■ type

リクエストタイプをgetまたはpostで設定します。
デフォルトではmethodで設定したリクエストタイプになっています。

■ beforeSubmit

送信前に呼び出すコールバック関数を指定できます(validateなどの時に使用する)。
コールバック関数の戻り値がfalseの場合、フォームは実行されません。
コールバック関数に渡される引数は順番に以下の3つです。
・formData … フォームの入力値の配列データ。形式は以下のようになる。
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
・jqForm … フォームのjQueryオブジェクト
・options … AJAXフォームに設定したオプション値のオブジェクト

■ success

送信完了後に呼び出すコールバック関数を指定できます。
コールバック関数に渡される引数は順番に以下の2つです。
・responseText … リクエストで返されたtext
・statusText … リクエストのステータス

■ dataType

サーバ側のレスポンスのデータタイプをxml,json,scriptの中から指定出来ます。

■ resetForm

リクエストが成功した場合にフォームのデータをリセットするかどうかをtrue or falseで指定します。
デフォルトではnullです。

■ clearForm

リクエストが成功した場合にフォームのデータをクリアするかどうかをtrue or falseで指定します。
resetFormとの違いは、resetFormの場合フォームの入力項目をデフォルト値にしますが、clearFormの場合フォームの入力項目を空白にします。
デフォルトではnullです。


画像のAJAXアップロードフォームを作ってみる

簡単に画像のAJAXアップロードフォームを作ってみた

AJAXアップロードフォームのサンプル


■ HTML

<h2 class="sub-title">jQuery Form Plugin を用いたAJAX Form</h2>
<div id="uploadImage"></div>
<div id="uploadMessage"></div>
<form id="uploadForm" action="./ajax_form_upload/upload.php" method="post" enctype="multipart/form-data">
	画像アップロード:<input type="file" name="image" id="image" />
	<input type="submit" value="Upload Image" /> 
</form>


■ Javascript

$(function(){
	$("#uploadForm").ajaxForm({
		success: uploadFormResponse,
		dataType: "json",
		resetForm: true
	});
});
function uploadFormResponse(responseText, statusText){
	var resMsg=statusText+" : "+responseText.message;
	//alert(resMsg);
	$("#uploadMessage").html(resMsg);
	$("#uploadImage").html('<img src="./ajax_form_upload/images/'+responseText.file+'" />');
	return true;
}


■ PHP

<?php
header("Content-Type: text/javascript; charset=utf-8");
if($_FILES["image"]){
	$upImage=new uploadImage($_FILES["image"], "./images/", "upImage");
	echo '{"message":"'.$upImage->message.'", "file":"upImage.'.$upImage->fileExt.'"}';
}
class uploadImage{
	//画像アップロードクラス
}
?>


と、ここまで作ってみたけど一度アップロードしてもう一度アップロードしようとするとSafariで上手くいかない!
最初にアップロードしたときに何かが引っかかってるみたいなんだけど、いまいち検証できていない。


こんなのも分からんのか!?と思った方はコメントくださーい。
あと、APIの意味違うぜーっていうのもコメントくださーい。