ajax風に画像のアップロードをする

ajaxでフォームの送信をしているんですが、
その際、画像を送る必要があって
そういえばajaxって画像送れるん？
と思って調べてみた。

調べた結果、ajaxで送るのではなく
iframeをつかってajaxっぽくすることはできるみたいです。

ちょっと作ったので載せておきます。

main.html

<span id="pict" class="btn">pict</span>

<form id = "ajaxSubmit">
<input type="hidden" id="imgHiddenUrl" value="" />
</form>

<div id="imgPost">
<form id="uploadForm" action="imagePost" method="post" enctype="multipart/form-data" target="ajaxPostImage">
<input type="file" id="fileSelect" name="imageFile" />
<input type="reset" id="reset" />
</form>
</div>

<iframe name="ajaxPostImage" width="200" height="70"></iframe>

まず、画像を送信するメインhtmlです。
id#pictをクリックしたら、
画像を選択→画像を送る→(サーバサイドで画像を保存する)→iframeに表示させる→画像のurl情報をhiddenに持たせる
という流れです。
form#uploadForm のtargetの部分をiframeに指定しているところがポイント。
サーバサイドが出力したhtmlをiframeの中に入れる感じになる
div#imgPost の部分は、見えなくします。

iframe.html

<body>
<div id="imgFileUrl">imgUrl</div>
<div><html:img src="画像url" width="50" height="50" /></div>
<div id="deleteImg">削除</div>
</body>
</html>

画像を実際に表示するiframeのhtml。
削除ボタンで画像の削除もできるようにしておきます。

javascript

$(function(){

	var $pict = $("#pict"),
		$imgSelect = $("#fileSelect"),
		$imgForm = $("#uploadForm"),
		$iframe = $('iframe[name="ajaxPostImage"]');

	$pict.click(function(){
		$imgSelect.click();

		return false;

	});
        //fileのvalueが変わったら、データを送る
	$imgSelect.change(function(){
		$imgForm.submit();
		$iframe.show();
		$pict.attr("class", "btn btn-warning");

	});

	$imgForm.submit(function(){
		// submitされた時点で、loadイベントをbind
		$iframe.unbind().bind('load', function() {
			var response = $iframe.contents();
　　　　　　　　　　　　//iframeの中のurl情報を取得してhiddenに格納
			var imgUrl = response.find('#imgFileUrl').text();
			$("#imgHiddenUrl").val(imgUrl);

			deleteImg();
		});

	});

});

//画像削除
function deleteImg(){
	var $iframe = $('iframe[name="ajaxPostImage"]'),
		response = $iframe.contents(),
		$deleteimg = response.find("#deleteImg"),
		$pict = $("#pict"),

	$deleteimg.bind("click", function(){

		$.ajax({
			type:"POST",
			url:"サーバサイドurl",
			data:{
				"deleteurl":$("#imgHiddenUrl").val()
			},
			dataType:"html",
			success: function(data,dataType){
				$iframe.hide();
				$pict.attr("class", "btn");
				$("#imgHiddenUrl").val("");
				$("#reset").click();
			},
			error: function(){
				alert("問題が発生しました");
			}
		});
	});
}

画像データを送った後に、hidden要素に画像のurl情報を付けることによって、ほかの値と一緒にajax送信できるという仕組みです。

また、削除ボタンをクリックしたら、fileのvalueをresetボタンをクリックすることによって削除します。

なお、cssにbootstrapを使っています

参考url:
http://blog.joyfullife.jp/archives/2007/07/18115458.php
http://havelog.ayumusato.com/develop/javascript/e171-ajax-file-upload.html

kyuuuuuuuuuuriのブログ

うぇぶエンジニアになりたくてなりたくて震えるもろきゅうの日記です

ajax風に画像のアップロードをする