ＳＱＬの窓
<< PHP : ファイルアッ… | TOP | ロリポップのモジュ… >>

2020年06月21日


PHP : 選択した画像の表示 / ファイルアップロード ver.2

 
ver.1 では、選択したファイルが画像の場合どのような画像か確認できませんでしたが、FileReader を使用して画像を表示して確認できるようにしています。



✅ control.php
      コントローラ

✅ model.php
      アップロード実行関数を定義しています

✅ view.php
      画面定義

✅ client.js
      FileReader オブジェクトを使用した、画像表示
      ※ 画像は1つしか表示できません( アップロードも一つです )



control.php

<?php
// 不必要なエラー表示を行わない
error_reporting( E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED );
// ブラウザのキャッシュに保存しない
session_cache_limiter('nocache');
// セッションの開始
session_start();

// この ページの MIME( ページの種類 ) の設定
header( "Content-Type: text/html; charset=utf-8" );
// ***********************************************

// 固有の処理
require_once("model.php");


$image_path = "./myimages";
$result_message = "";

// ***********************************************
// リンクで呼ばれたページは GET で呼ばれるので、
// FORM から POST で呼ばれた時だけ処理を行う為、
// $_SERVER というシステム変数をチェックします
// ***********************************************
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {

	// ファイルアップロード
	file_upload();

}

// 画面
require_once("view.php");

// デバッグ
debug_print();

?>

model.php

<?php
// ********************************************
// このアプリケーション専用の処理
// ********************************************

// ********************************************
// ファイルをアップロードする
// ********************************************
function file_upload() {

	global $image_path;
	global $result_message;


	if ( !is_dir( $image_path ) ) {

		mkdir( $image_path );

	}

 
	$upload = realpath($image_path);
	$upload .= ( DIRECTORY_SEPARATOR . $_FILES['target']['name'] );

	// *******************************************************
	// アップロードされると、一旦一時ファイルとしてサーバに
	// 置かれるので、move_uploaded_file でアップロードされた
	// 一時ファイルが必要な場合に移動処理を行います
	// *******************************************************
	if ( move_uploaded_file($_FILES['target']['tmp_name'], $upload ) ) {
		$result_message = "<p>アップロードに成功しました</p>";
	}


}

// *******************************************************
// デバッグ
// *******************************************************
function debug_print() {

	print "<pre>";
	print_r( $_GET );
	print_r( $_POST );
	print_r( $_SESSION );
	print_r( $_FILES );
	print "</pre>";

}
?>


view.php

client.js がブラウザでキャッシュされないように、PHP の time 関数を使用して jQuery の $.get のようにパラメータを渡しています。

bootstrap.css は、ここではコンテンツのマージン指定とボタンの見栄え程度しか使用していません。

cdnjs twitter-bootstrap 4.5.0
Google Hosted Libraries : jQuery

<!DOCTYPE html>
<html>
<head>
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<meta charset="UTF-8">
	<title>単純ファイルアップロード</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">

	<script src="client.js?_=<?= time() ?>"></script>
</head>
<body>
	<div id="head">
		<div id="title">
			<a href="./">ファイルをアップロード</a>
		</div>
	</div>
	<div id="content">
		<form enctype="multipart/form-data"
			method="POST">
			<p>
				<input type="hidden"
					name="MAX_FILE_SIZE"
					value="1000000">

				<input id="target"
					name="target"
					type="file"
					class="ml-1 mt-3 btn btn-outline-primary">
			</p>
			<p>
				<input type="submit"
					name="send"
					value="アップロード"
					class="ml-1 btn btn-outline-primary">
				<a class="ml-4 btn btn-info btn-sm" href="<?= $_SERVER["PHP_SELF"] ?>">リロード</a>
			</p>
			<div id="image"></div>
		</form>
	</div>
	<div id="result"><?= $result_message ?></div>
</body>
</html>

client.js

$(function(){

	// INPUT type="file" のファイル選択後のイベント
	$("#target").on("change", function(){

		// 画像表示部分をクリア
		$("#image").html("");

		// 選択されたファイルの情報
		console.dir( this.files );

		// ファイル参照用のクラス : FileReader
		var reader = new FileReader();

		// 表示用にプロパティを追加
		reader.name = this.files[0].name;
		reader.type = this.files[0].type;

		// 画像が読み込まれると実行されるイベント
		$(reader).on("load", function () {

			// FileReader の内容
			console.dir( this );

			if ( this.type.indexOf("image/") == 0 ) {
				$("<img>").appendTo("#image")
					.prop( {"src": this.result, "title": this.name + " : " + this.type } )
					.css( {"width": "160px", "margin": "10px","border": "1px solid #c0c0c0" } );
			}
			else {
				$("<img>").appendTo("#image")
					.prop( {"src": "./notimage.png", "title": this.name + " : " + this.type } )
					.css( {"width": "160px", "margin": "10px","border": "1px solid #c0c0c0" } );
			}

		});

		if (this.files[0]) {
			// 画像を読み込み
			reader.readAsDataURL(this.files[0]);
		}

	});
	
});
【PHP + WEBアプリの最新記事】
posted by lightbox at 2020-06-21 14:15 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり