Safari 5 / Firefox 4以降、FormData
クラスを使用するのが最も簡単です。
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
これFormData
で、XMLHttpRequestと共に送信する準備ができたオブジェクトができました。
jQuery.ajax({
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
});
このcontentType
オプションをfalse
に設定して、jQueryがContent-Type
ヘッダーを追加しないようにする必要があります。そうしないと、境界文字列がヘッダーから欠落します。また、processData
フラグをfalseに設定したままにしておく必要があります。そうしないと、jQueryがFormData
文字列に変換しようとして失敗します。
これで、PHPでファイルを取得できます。
$_FILES['file-0']
(ファイル入力で属性file-0
を指定しない限り、ファイルは1つだけmultiple
です。この場合、ファイルごとに番号が増加します。)
古いブラウザでのFormDataエミュレーションの使用
var opts = {
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
};
if(data.fake) {
// Make sure no text encoding stuff is done by xhr
opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
opts.contentType = "multipart/form-data; boundary="+data.boundary;
opts.data = data.toString();
}
jQuery.ajax(opts);
既存のフォームからFormDataを作成する
ファイルを手動で繰り返す代わりに、既存のフォームオブジェクトの内容を使用してFormDataオブジェクトを作成することもできます。
var data = new FormData(jQuery('form')[0]);
カウンターの代わりにPHPネイティブ配列を使用する
ファイル要素に同じ名前を付け、名前を角かっこで終了するだけです。
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file[]', file);
});
$_FILES['file']
アップロードされるすべてのファイルのファイルアップロードフィールドを含む配列になります。反復する方が簡単なので、最初のソリューションよりも実際にこれをお勧めします。