PHP のファイルアップロードで画像ファイルを限定で行う為のテンプレートと注意事項と解説

Webアプリのサンプルソースとして基本的な事

● キャラクタセットは utf-8 で、http ヘッダも meta 要素も統一してどちらも記述します

● イザと言う時の為に、jquery のライブラリは読み込んでいます。これは、デベロッパーツールのコンソールで何かしたい時にとても有効です。

● スマホ表示用として、meta 要素の viewport は記述しておきます。

● デバッグ表示は、print_r( $変数, true ) を pre 要素で挟んで表示します

● コメントを好きな場所に書いて、結果が消えるように <?php // コメントの記述 ?> というような記述方法を使っています。

ブラウザキャッシュについて

PHP の関数として用意されている session_cache_limiter('nocache'); を使用しています。ただ、これを使うには、セッションを開始する必要があります。ここでは、セッションは使用していませんが、いつでも使用できるようにしても損はありません。

ファイルのアップロード処理として２アクションを使用

画面には、アップロードする為の UI に記述を限定しています。実装としてはHTML でも良いのですが、後々の事や、キャッシュやキャラクタセット、そして PHP コメントの使用を考えれば、PHP で記述するほうが得です。但し、機能としてはほぼ、クライアントの処理のみに限定しています。

さらに、IFRAME を使用して、結果によって画面を崩さないようにしています。実用的に考えた場合、この画面自体を IFRAME にして、自由に開いたり閉じたりする UI を想定しています。その場合、３階層のウインドウになりますが、同一ドメインであれば相互の処理は jQuery で容易に行えるので、現在デバッグ情報を表示している最下層の IFRAME で jQuery を出力すれば、フォーム画面の表示調整は容易です。

2アクション目の、upload.php の役目も、ファイルの処理のみに限定でき、メンテナンスや拡張も容易になるはずです。

ファイルアップロード時のエラーコード

PHP のドキュメントを参照して下さい。通常、2(MAX_FILE_SIZE オーバー) か 4 のエラーになると思います

$_FILES 情報の type のウソについて

この情報は正確ではありません。拡張子より決定しているようなので、exif_imagetype で正しいフォーマットを決定して使用しています。Windows 環境では、php.ini で php_exif.dll を有効にする必要があるので注意して下さい。

日本語ファイル名について

日本語部分を urlencode する事によって、一般的に WEB環境のディスクに保存できるようになります。但し、その文字のまま、WEB で呼び出そうとすると　Not Found となるので注意して下さい。ブラウザ等から呼び出す場合、urlencode 部分が元に戻ってサーバに渡されます。なので、WEBアプリのクライアント側で扱う文字列としては、もう一度 urlencode しておく必要があります。

同一ファイルのアップロードについて

簡単に uniqid() の結果を頭に付けてファイル名を決定しています。ブラウザ側で、ギャラリーとして表示する場合は、uniqid() 部分を取り除いて表示する事によってオリジナルファイル名となります。しかし、ここでもしそのファイルが日本語の場合、urlencode されているので、urldecode する必要がありますが、そのままでは Windows 環境からアップロードされたものは、SHIFT_JIS のままだという事に注意して下さい。ギャラリーのページのキャラクタセットが SHIFT_JIS 以外の場合は、mb_convert_encoding で変換が必要になります

未実装の処理について

このままでは、ファイルがアップロードされて images フォルダに増えて行くばかりとなります。画像という前提の為、『ギャラリー』を作成する必要がありますが、画像の表示には、メモリを圧迫しない小さな画像ファイル(サムネイル)が必要になります。その為には、GD を使用してアップロードが成功した後に、縮小したファイルを作成する必要があります。

サムネイルが作成されれば、一覧表示をファイルシステム関数を使用して表示するだけですが、オリジナル画像を参照する為に、ポピューラーな Lightbox2 ライブラリ等を実装して使用する事となります。

アップロードフォーム
▼ file_upload.php

<?php
// *************************************
// キャラクタセット
// *************************************
header( "Content-Type: text/html; charset=utf-8" );
// *************************************
// キャッシュ無効
// *************************************
session_cache_limiter('nocache');
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<?php // キャラクタセット ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php // スマホ用 ?>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<?php // イザと言う時の為 ?>
<script src="https//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
body {
	margin: 0;
	padding: 30px;
	background-color: #d0d0d0;
}
body,pre,input {
	font-size: 16px;

<?php // よくある(ポピュラーな)設定 ?>
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}
</style>

</head>

<body>
<form
<?php // ファイルアップロードで必須 ?>
	enctype="multipart/form-data"
	method="post"

<?php // ファイルがアップロードされる php ?>
	action="upload.php"

<?php // 結果が表示される IFRAME の名称 ?>
	target="result_window">

<?php // php の画像サイズ制限の設定 ?>
	<input type="hidden" name="MAX_FILE_SIZE" value="1000000">

<?php // ローカルファイル参照用 ?>
	<input type="file" id="file" name="file" size="40">
	<br>
	<br>
	<input
		type="submit"
		name="send"
		value="開始">
	<br>
	<br>
</form>

<?php // 結果が表示される IFRAME ?>
<iframe
	name="result_window"
	frameborder="1"
	scrolling="yes"
	width="100%"
	height="400"
	style='background-color:white;'
></iframe>


</body>
</html>

アップロードされたファイルの処理
▼ upload.php

<?php
// *************************************
// キャラクタセット
// *************************************
header( "Content-Type: text/html; charset=utf-8" );
// *************************************
// キャッシュ無効
// *************************************
session_cache_limiter('nocache');
session_start();

// ファイルを移動するフォルダ
$target_folder = "./images/";

// *************************************
// アップロードされたファイル
// *************************************
$ok = ( $_FILES['file']['error'] == 0 );
if ( $ok ) {

	// *************************************
	// 以降、アップロードそのものは成功
	// *************************************

	// *************************************
	// 1) 画像フォーマットの取得
	// *************************************
	$type_string = image_type_to_mime_type( exif_imagetype( $_FILES['file']['tmp_name'] ) );

	// *************************************
	// 2) オリジナルファイル名の取得
	// *************************************
	$file = explode(".", $_FILES['file']['name']);

	// *************************************
	// 3) 日本語ファイル名対応
	// *************************************
	$file_name = urlencode( $file[0] );

	// *************************************
	// 4) 保存ファイル名を作成
	//   a) 拡張子決定
	//   b) uniqid() でファイル目をユニーク
	// *************************************
	$target = "";
	if ( $type_string == "image/jpeg" ) {
		$target = uniqid() . "_{$file_name}.jpg";
	}
	if ( $type_string == "image/gif" ) {
		$target = uniqid() . "_{$file_name}.gif";
	}
	if ( $type_string == "image/png" ) {
		$target = uniqid() . "_{$file_name}.png";
	}
	if ( $target == "" ) {
		$result = "アップロードできないフォーマットです\n";
	}
	else {
		// *************************************
		// アップロードファイルの保存
		// *************************************
		if ( @move_uploaded_file( $_FILES['file']['tmp_name'], $target_folder . $target ) ) {
			$result = "アップロードに成功しました\n";
		}
		else {
			// なんらかの環境エラー
			$result = "アップロードに失敗しました\n";
		}
		
	}
}
else {
	$result = "ファイルはアップロードされていません";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
body {
	margin: 0;
	padding: 40px;
	background-color: #ffffff;
}
body,pre {
	font-size: 16px;
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}
</style>

</head>

<body>
<h3><?= $result ?></h3>

<?php // 情報を最も簡単に表示する方法 ?>
<pre>
<?= print_r( $_FILES, true ) ?>
<?= print_r( $_POST, true ) ?>
</pre>
<?php // urlencode は、日本語のファイル名に必要です ?>
<img src="<?= $target_folder . urlencode( $target ) ?>" style='width:90%;'>
</body>
</html>

オリジナルファイル名については、. がファイル名に含まれないように考慮しています。

PHP + 特記事項

PHP : 指定ファイル名でダウンロード 『application/octet-stream』 と 『Content-disposition: attachment』

PHP の関数で規定されているキャッシュコントロールの無効 : session_cache_limiter( 'nocache' )

PHP : 一定時間前のファイルの削除

PHP : ${'日本語表示'} という可変変数と、${hello . "X"} という連結可変変数

cp932 の SQLServer に対して、PHP の ODBC 関数に対して UTF8 変換で地道に対応し、特殊なUncode文字は、HTML 数値エンティティで保存する。

pChart2 に JKゴシックとラノベポップを使ってサンプルを作りました

PHP の ImageMagick で作成した PNG 画像にオフセットが設定されてしまった場合の対応方法

PHP : 連想配列を「オブジェクト」に変換(キャスト)するとうまく動きますが、通常配列では参照できないようです

PHP でエラーが表示されない場合の ini_set( 'display_errors', "1" ) 使用時の注意事項

特に変更しても支障の無い error_append_string php.ini ディレクティブを使用して PHP 全体のデバッグに利用する

PHP : 日本語を使った変数( 特殊文字列で変数 ) / 変数名を文字列として扱う

PHPの真偽値

PHP : include_path の設定

PHP : 漢字スペースも trim