読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

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

作業メモ

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でエンコードされたデータ>

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