jQuery($.ajax)で、ファイルをアップロードしてみる。

最近は、ページを遷移しないサイトが増えてるようなので、画像のアップロードも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でアップロードされたファイルを受け取る。