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アプリの最新記事】
- PHP : $.ajax でアップロード( 画像限定 ) / ファイルアップロード ver.3
- PHP : ファイルアップロード ver.1
- 超簡易掲示板 ( JSON ) : PHP / CSS でスマホ用レスポンシブ対応
- PHP : 曲線が必要ならば ImageMagick ( 但し使えるかどうかはサーバー次第 )
- GD で画像縮小。『1) 単純縮小、2) 幅にあわす 3) 高さにあわす 4) 任意の幅と高さ』をその他の処理も含めてクラスでまとめ( class GD )
- PHP : 超簡易ログ
- PHP + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート
- Windows で Laravel を試す際、PHP の Windows バージョンが 5.6.30 なので、Laravel 5.2 をインストールします
- Laravel を試す為に Windows に Composer をインストール
- スマホ対応、サーバインデックス表示パッケージ( jQuery + Bootstrap(css) + mmenu + PHP )
- 超簡易掲示板 : 保存タイプは CSV
- PHP による『超簡易掲示板』 / アプリケーションからの POST 検証用
- PHP : 既存 GD 関連ライブラリで、背景をグラデーション(２)
- PHP : 既存 GD 関連ライブラリで、背景をグラデーション
- PHP : 入力値のデバッグ
- PHP : ImageMagick : 背景が透過する画像を作成
- PHP雛型(２会話DB更新処理) : MySQL、XMLHttpRequest、XML、JSON、Canvas
- PHP をテストする為の初心者用フォーム
