JavaScriptを使ったファイルのサーバへのアップロード

参考URL

• JavaScriptプログラミング講座【ファイルをアップロードする】
  • FormDataの作り方を参考。
• FormData オブジェクトの利用 - Web developer guide | MDN
  • jQueryからのFormDataの送り方を参考。
• $.post() | jQuery 1.9 日本語リファレンス | js STUDIO
  • jQuery.post()をjQuery.ajax()に書き換える方法を参考。
• 画像をBase64に変換するツール (data URI scheme) - シングスブログ
  • base64でイメージをエンコードしたデータの中身の確認に利用。

作業メモ

JavaScript側

• JavaScriptから送信したいのでXMLHttpRequest Level2を利用する。
• IE9以降が必要。window.FormDataが真かで確認。
• formタグに enctype="multipart/form-data" 属性を設定。
• FormDataにファイルデータを含める。
• 以下で、フォームに含まれる全てのデータを設定。

var form = document.getElementById(<formのid>);
var formdata = new FormData(form);

• FormDataをjQuery.ajax()で送信するには、パラメータのdata:にFormDataオブジェクトを指定し、jQueryがデータを処理しないようにprocessData: false、contentTypeを設定しないようにcontentType: falseをあわせて指定する。

// 送信
$.ajax({
	type: 'POST',
	url : 'url.php',
	data: formdata,
	processData: false,	// jQueryがデータを処理しないように設定
	contentType: false,	// jQueryがcontentTypeを設定しないように設定
	success: function(data) {alert("success")},
	error: function(data) {alert("error:"+data.statusText);}
});

受け取り側PHP

• 受け取りは$_FILES[]で、各種ファイルの属性が読み取れる。
  • $_FILES[]['name']:元のファイル名
  • $_FILES[]['tmp_name']:サーバに保存されているファイル名
  • $_FILES[]['type']:ファイルの種類。image/pngなど
  • $_FILES[]['error']:エラーコード。成功時は0
  • $_FILES[]['size']:ファイルサイズ
• ファイルがアップロードされたか確認するには is_uploaded_file($_FILES[]['tmp_name'])の戻り値がtrueかを確認する。

base64にエンコードされて送信されるイメージデータ

アップロードだとバイナリがそのまま送信されるので、base64のデコードは不要である。これをbase64でエンコードされたデータと同様に扱うには、base64でエンコードされた場合に冒頭に付加されるメディアタイプとbase64を付加する必要がある。データの例は以下の通り。

image/png;base64,<ここからbase64でエンコードされたデータ>

「,」の前までを付加することで、両者を共用することができる。