jQuery($.ajax)で、ファイルをアップロードしてみる。
2014年11月14日
最近は、ページを遷移しないサイトが増えてるようなので、画像のアップロードもAjaxで。
<form id="form"> <input type="file" name="img_file"> <input type="submit" value="アップロード"> </form>
普通にpostする場合だと、formタグにenctype=”multipart/form-data”てなヤツが必要ですが、Ajaxで送るんで、不要(書いてもいいですが・・)
で、js側。
$('#form').submit(function(){
var params = new FormData( $(this)[0] );
$.ajax({
type: "POST",
url: "/ajax/upload",
contentType: false,
processData: false,
data: params,
dataType: "json",
success: function( json ) {
// 完了処理
}
});
});
FormDataを使うと、html側のnameとvalueを拾ってオブジェクトにしてくれます。
で、Ajaxのオプションに
contentType: false processData: false
を追加。
あとは、サーバーサイドでファイルを受け取るだけ。
受け取る側は、いつも通りで。
Perl(Amon2)の場合は >> Amon2でアップロードされたファイルを受け取る。