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でアップロードされたファイルを受け取る。