フォームデータの送信
ユーザーからアップロードされたファイルを、AJAXでサーバーへ送る場合、HTMLの記述は、
<form id="upload">
<input type="file" name='File'>
</form>
とすると、JQueryでの実装は次のようになります。
function sendFormData(){
var formData = new FormData($('#upload').get(0));
formData.append('key','value');
$.ajax({
url : 'receiveFormData.php',
type : 'POST',
data : formData,
cache: false,
contentType : false,
processData : false,
})
.done(function(data, textStatus, jqXHR){
//通信成功時の処理
・・・
})
.fail(function(jqXHR, textStatus, errorThrown){
//通信失敗時の処理
・・・
});
}
フォームデータを格納するためにFormData
オブジェクトのインスタンスを生成します。この引数にform
の要素を渡すために、get()
を使ってJQueryオブジェクトから要素を取り出します。このget()
の引数は、格納されている要素のインデックスを指定します。インスタンス生成後にデータを新たに追加する場合は、append()
メソッドを用いて、第1、2引数に、それぞれキーと値を指定します。また、ファイルをアップロードする場合は、contentType
、processData
を共にfalseに設定し、この関数をフォームのinput
要素のイベントに登録します。
$('#upload input').change(sendFormData);
ファイル情報取得
送信されたファイルをサーバー側で取得する場合、スーパーグローバル変数の$_FILES
を用います。
$file = $_FILES['File'];
input
要素で指定したname
を使って、ファイルの情報を配列で取得します。その配列の構造は次のようになります。
Array ( [name] => Array ( [0] => town.flac ) [type] => Array ( [0] => audio/flac ) [tmp_name] => Array ( [0] => /tmp/phptNa7ql ) [error] => Array ( [0] => 0 ) [size] => Array ( [0] => 6903381 ) )
それぞれの要素を取り出すには、$file['name'][0]
のように指定します。ファイルは一時的にtmp_nameで示されるパスに保存され、アップロードに失敗すれば、errorには0以外の数値であるエラーコードが入ります。
URL: sac.ringil-music.com
環境: さくらのVPS・Centos7・Nginx・PHP-FPM