読者です 読者をやめる 読者になる 読者になる

風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

jQuery.uploadの不具合?→jQuery.ajax()を使った解決編

これではちょっと困る……ではどうすればよいのでしょうか?
jQueryでAjaxでファイルアップロード - やわらかたまご - molaovo -に、new FormData() を使った解決編がありました。
window.FormDataは、IE9以前は多分未サポートだと思われますが。

具体例

こちらのサンプルをお試しください。
こちらもアップロードするファイルは別になんでもよいです

サンプルのソースコード

<script src="./jquery-1.7.1.min.js"></script>
<script>
(function(w,d){

function escape_html(html){
	var	ehtml=html.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/</g,'&lt;');
	return ehtml;
}

$().ready(function(){
	$('input[type=file]').change(function() {
		var jq_input=$(this), jq_form=jq_input.parent('form'), id_base=jq_form.attr('id');
		$.ajax(jq_form.attr('action'), {
			type: 'post'
		,	cache: false
		,	contentType: false
		,	processData: false
		,	data: new FormData(jq_form[0])
		,	dataType: 'html'
		,	success: function(html){
				$('#container1_'+id_base).append($(html));
				$('#container2_'+id_base).val(html);
				$('#container3_'+id_base).html(escape_html(html));
		  	}
		});
	});
})
})(window, document);
</script>

SCRIPT部分以外は前の記事と同じなので、省略。


余談

「jQuery File Upload」…こういうのを使えたらクールで恰好いいと思うんだけれど、使い方やカスタマイズのやり方を覚える最初のひと手間を惜しんで、損をしているんだよな、きっと<自分。