通常は <input type="submit"> ボタンを押した時にファイルが送信されますが、
JavaScript で後から送信したい場合があります。
HTML が以下のようになっていたとします。
<h2>ファイルアップロード</h2>
<form id="ajaxform">
<input id="file" name="file" type="file"></input>
<input id="submit" type="submit"></input>
</form>
jQuery で以下のように書きます。
// ファイルのアップロード
$('#submit').click(function() {
// FormData の作成
var form = $('#ajaxform').get(0);
var formData = new FormData(form);
// FormData を送信
$.ajax('/upload', {
method: 'POST',
contentType: false,
processData: false,
data: formData,
dataType: 'json',
error: function() {
console.log('error');
},
success: function() {
console.log('success');
}
});
// false を返してデフォルトの動作をキャンセル
return false;
});
dataType はサーバの出力に合わせて変更して下さい。ポイントは contentType と processData が false になるところです。
contentType = 'multipart/form-data' にはなりません。
詳しくは jQuery のドキュメントをご覧ください。
参考
jQuery.ajax()
http://api.jquery.com/jQuery.ajax/
The FormData Interface - W3C
http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface
jQueryでAjaxでファイルアップロード - やわらかたまご - molaovo -