WordPressの質問（q10093310）の続

質問

スタンプ画像を送信する機能をデータベースに格納したいのですが、格納した数字と画像URLを結び付ける方法が分かりません。
アドバイスお願い致します。

※最新のコード
https://wandbox.org/permlink/A4VLYzAR2h4uYYRh

回答No.33

dell_OK · ベストアンサー

・3点目は表示についてになります。前述のとおりtokenの使い方が難しく参考サイトを見ても文字と画像どちらに対する防御コードか理解できておりません。

tokenについては先の回答で大丈夫ですね

・表示コードは下記のようになるのではないかと書いているのですが、スタンプ画像のほかに名前とメッセージにもisset関数で変数がセットされているか確認する必要があるのか分からなかったため、

それっぽい処理はすでにされていますよ。
ただ、メール送信から部分的にコピーしてきただけのようなのでこれだけではだめです。
－－－－
$namae_value = isset($namae) ? htmlspecialchars($namae, ENT_QUOTES) : '';
$message_value = isset($message) ? htmlspecialchars($message, ENT_QUOTES) : '';
－－－－

あと、必須のチェックはHTML任せになっているので、ＰＨＰ側でもチェックするようにした方がいいのかも知れません。

いただいた質問にだけ簡単に回答していたので、コードをよく見ていませんでした。
細かく見てみると、いろいろと直した方がよさそうです。
メール送信から拝借したためなのもあるので、あれとはまったく別物と思ってください。

その１。
最初の方にある不正アクセスはコードに無駄があります。
－－－－
$noindexaccess = true;
～（省略：インラインフレーム禁止）
// 不正アクセスチェック
if (!$noindexaccess) {
header('HTTP/1.0 404 Not Found');
exit;
}
// 不正アクセスチェック
if (!$noindexaccess || isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－
これだけでいいです。
－－－－
// 不正アクセスチェック
if (isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－

その２。
エラー表示がありますが、チェック処理がありません。
－－－－
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－
これより前にチェック処理をしてください。
こんな流れになります。
－－－－
// エラーメッセージ
$error_mes = '';
～チェック処理
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－

他にもありますが、今日はここまでにしておきます。

補足

Q.tokenについては先の回答で大丈夫ですね

それっぽい処理はすでにされていますよ。
ただ、メール送信から部分的にコピーしてきただけのようなのでこれだけではだめです。
－－－－
$namae_value = isset($namae) ? htmlspecialchars($namae, ENT_QUOTES) : '';
$message_value = isset($message) ? htmlspecialchars($message, ENT_QUOTES) : '';
－－－－

A.アドバイスありがとうございます。tokenは送信する際に生成するものだと理解できました。

確かに中の文字列チェックは行われていますがHTMLですね。

Q.その１。
最初の方にある不正アクセスはコードに無駄があります。
－－－－
$noindexaccess = true;
～（省略：インラインフレーム禁止）
// 不正アクセスチェック
if (!$noindexaccess) {
header('HTTP/1.0 404 Not Found');
exit;
}
// 不正アクセスチェック
if (!$noindexaccess || isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－

A.こちらのコードは保存と表示のファイルを分けるという想定をしていたので残しておりました。今のところ削除と保存のコードファイルは分けることに決めているのですが、表示は同じファイルで実装できそうでしょうか？

Q.その２。
エラー表示がありますが、チェック処理がありません。
－－－－
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－

A.こちらはお問合せフォーム用のファイルを見ると文字列チェックなどのコードを別ファイルに書いていてそちらを外部から読み込んでいるようです。
rerification.phpに文字列チェック用コードを書いたのですが、こちらは外部から読み込ませたほうが良いでしょうか？そのままecho '<div style="color:red;">';の上に追加するべきでしょうか？

※最新コード
https://wandbox.org/permlink/4aLeppvHjfrIycUx

回答No.12

dell_OK

・リサイズするついでにPNG形式に変換する方法でもよいでしょうか？

その方がいいかも知れません。

・もしpdf等を保存したい場合、md5_file()でファイル名を生成できなければどのようにファイル名を作成するのか分かりかねます。

pdf等でもmd5_file()でファイル名を生成できるので問題ありません。

確認していませんでしたが、ファイル名をデータベースに保存するつもりでしょうか。
ファイル名にＩＤを使えばファイル名は簡潔ですし、データベースに保存する必要もありません。

お礼

バイナリー画像ファイルの拡張子を変更するコードを調べても情報が出てこず困っております。
画像のバイナリデータから、拡張子を求めてから拡張子を変更するのかも分かりません…
アドバイスお願い致します。
ファイルの拡張子を調べる方法は出てくるのですが…

※現在のコード
https://wandbox.org/permlink/EyCv2TsHYBASFmzy

補足

アドバイスありがとうございます。安心しました。
ファイル名を保存する予定だったのですが、IDと結び付けてそちらをデータベースで管理可能という事でしょうか？
リスク軽減にもなりますのでそちらが可能であればそのように実装したいです。
データベースは削除等管理がしやすいので作成しておきたいです。

回答No.11

dell_OK

・getimagesize関数でリサイズして保存後に拡張子を切り出すことは可能でしょうか？

拡張子を切り出す、と言うのがわかりません。

リサイズするついでにJPEG形式に変換する方法も検討してみてください。
それなら拡張子を「.jpg」で固定にできます。

コード添削１
この行の最後に { を付けてください。
　if (isset($_FILES['upfile']) && is_array($_FILES['upfile']) && $_FILES['upfile']['error'] === UPLOAD_ERR_OK)

コード添削２
この行は削除してください。
　$ext = strtolower(substr($_FILES['upfile']['name'], strrpos($_FILES['upfile']['name'], '.')));

元のファイル名の拡張子は使いませんし、その前の処理
if ($info[2] == IMAGETYPE_PNG) $ext = '.png';
if ($info[2] == IMAGETYPE_JPEG) $ext = '.jpg';
が無意味になってしまっています。

お礼

一抹の不安があるのですが、拡張子をもとのpngからjpegに変更したときに画質が著しく低下するのではないかと考えています。
元の画像をそのまま使うのは危険ですしリサイズするついでにPNG形式に変換する方法でもよいでしょうか？

補足

アドバイスありがとうございます。拡張子を保存する方法について大体のイメージができたのですが、画像以外のファイルの場合の場合(pdf)には、getimagesize関数で画像形式を取得するという手法が採れないようです。その代わり、ほとんどの（用途が定まっている）ファイルは、その中の数バイトが「※決まった文字列（バイナリ）」になってるため、それを確認できるようです。
(マジックナンバーとよばれている)

もしpdf等を保存したい場合、md5_file()でファイル名を生成できなければどのようにファイル名を作成するのか分かりかねます。
dell_okさんからみて作成する方法などはありますでしょうか？
pdfファイル名を作成できない場合、.pdfで保存する方法が分かりません。

※参考サイト
https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%B8%E3%83%83%E3%82%AF%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC_(%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E8%AD%98%E5%88%A5%E5%AD%90)

※考えている全体の流れ
①md5_file()でファイル名生成
↓
②拡張子はバイナリーデータから付与(2進数のデータ)
↓
③DBへ

もし拡張子を保存する場合は①からjpeg/image形式に変換
↓
拡張子を「.jpg」等で固定可能
↓
DBへ

※参考サイト
https://kosuke-space.com/python_image_binary

回答No.10

dell_OK

・ファイルのパーミッションを確実に0644に設定ということが書いてあるのですが、これらの機能はどのような意味があるのでしょうか？

権限の設定としてはこちらの説明でわかると思います。
https://www.php.net/manual/ja/function.chmod.php

ＷＥＢサーバー（Apache実行ユーザー）が所有者だとして、
閲覧者はその他になるのか、
それともＷＥＢサーバーが提供しているため閲覧者は権限と無関係ないのか、
私にはどのような意味があるのかわかりません。

補足

ファイルの拡張子を保存する方法を考えているのですが、セキュリティの問題が多々あり対策が必要になりそうです。
ファイルをアップロードする機能の場合、様々な攻撃を受けるようなので元のファイルは極端に言うと捨てるような形をとるほうが良さそうです。
$_FILES[]['name']や$_FILES[]['type']などはセキュリティ対策を避けるのであれば使わないようにするべきですので、//ここからが疑問のコードまでは同じような書き方になると考えています。

getimagesize関数でリサイズして保存後に拡張子を切り出すことは可能でしょうか？

元のファイルをそのまま使う場合PHPで作成したファイルが盗み見られて中のファイルが攻撃の対象になるなど不安な点が多いため悩んでおります…

※ディレクトリについて
https://wepicks.net/phpsecurity-file/

※参考サイト
https://worthliv.com/wlh_post_30.html

※ファイルを保存するコード
<?php
// ▼ファイルを受信できたかチェック このファイルアップロードに関する エラーコード
//!is_array($_FILE['upfile']['error']) で配列で送信されていないかチェック
//エラーはなく、ファイルアップロードは成功しています。
if (isset($_FILES['upfile']) && is_array($_FILES['upfile']) && $_FILES['upfile']['error'] === UPLOAD_ERR_OK)
// $_FILES['upfile']['mime']の値はブラウザ側で偽装可能なので
// MIMEタイプを自前でチェックする
//複数の画像ファイルを受け取ってそれぞれリサイズして保存する
if ($info = getimagesize($_FILES['upfile']['tmp_name'])) {
//getimagesize関数の戻り値から画像形式に対して適切な拡張子を付与
if ($info[2] == IMAGETYPE_PNG) $ext = '.png';
if ($info[2] == IMAGETYPE_JPEG) $ext = '.jpg';
//PDFファイルには適用
//文字列のうちの指定された部分文字列をすべて小文字にして返します
//strrpos — 文字列中に、ある部分文字列が最後に現れる場所を探す
$ext = strtolower(substr($_FILES['upfile']['name'], strrpos($_FILES['upfile']['name'], '.')));
//変数が宣言されていること、そして null とは異なることを検査する
//指定したファイルのMD5ハッシュ値を計算する
//Webサイト上の記述と比較することにより、ダウンロードの成功／失敗、改ざんの有無を判断
if (isset($ext)) {
$newpath = 'upload_images/' . md5_file($_FILES['upfile']['tmp_name']) . $ext;

//ここからが疑問のコード
//アップロードファイルを移動する関数 移動元のファイルは $_FILES["upfile"]["tmp_name"]
if (move_uploaded_file($_FILES['upfile']['tmp_name'],
$newpath)) $img = sprintf('<img src="%s">', $newpath);
//ファイル 保存 エラー
else $err[] = 'file save error';
//getimagesize関数が正しく処理できない形式のファイル
} else {
$err[] = 'image type error';
}
//ファイル プレビュー エラー
} else {
$err[] = 'file type error';
}
}
//implode関数は配列の要素を結合して文字列に変換する関数
$errmsg = $err ? '<div style="color:red">' . implode('<br>', $err) . '</div>' : '';
?>

回答No.9

dell_OK

・ユーザー側には注意分は見えるようになっているため重複するようにはしたくない、同じような機能をダブって実装させるのも如何なものかと悩んでおります。

そうですね。
何が正解かわかりませんが、JavaScriptでチェックしているので不要だと思います。

・また保存の際のリサイズがよく見られるのですが、こちらは速度に影響するものでしょうか？実装すべきかアドバイスいただきたいです。

大きければその分時間がかかる、小さければその分時間がかからない、
と言うのは当然ですので、速度に影響するのは確かです。

参考サイトにはリサイズの理由が書かれていないのでしょうか。
少し一緒に考えてみましょう。

すでにファイルサイズのチェックをしていますがそれはなんのためでしょうか。

サーバーの環境に依存するようなもので言うと、
アップロードできるファイルサイズ制限や、
保存領域の制限が考えられます。
これがなければ無制限でいいわけです。
無制限にするとアップロードにもダウンロードにもサーバーの負荷は否めません。

つぎに閲覧者側への負担で言うと、
無制限に大きな画像ファイルをダウンロードすると時間がかかりますし、
携帯端末などで見た場合にデータ通信量を食ってしまう恐れがあります。

以上のようにファイルサイズのチェックはいろいろと理由が付けれそうです。

では、画像のリサイズをする理由はなんでしょうか。
リサイズと言っても一般的には縮小化であり、
たいていの場合はファイルサイズは小さくなります。
規定のサイズより小さいからと言って大きくはしないでしょう。

ファイルサイズのチェックでＯＫが出た画像に対して、
その後で画像のリサイズをすると、ファイルサイズも小さくなります。
「ええ？それじゃなんのためのファイルサイズチェック？」って気がします。

ファイルサイズが大きくてアップロードできなかったユーザーは、
いったん自分でリサイズなどしてファイルサイズを小さくしてアップロードすることになります。
面倒だとアップロードをあきらめるかも。
ユーザーもリサイズして、サーバーでもリサイズして、と言うこともあるかも知れません。

以上のことから、リサイズするのであれば、
アップロードファイルのサイズはある程度大きくしておいても大丈夫かなと思います。

今度は、リサイズしない理由を考えてみましょう。
これは、元の画質を保つ、に限ると思います。
画像の品質を重視するなら、リサイズはしてはいけません。

リサイズするにしてもしないにしても、
表示する時にはサイズを指定して表示するはずですので、
元のサイズで直接みることはあまりないでしょうね。

１ＭＢ制限をしていても何百枚も保存するとサーバーの領域を圧迫します。
画質を優先しないのであれば、
リサイズしてサーバー領域をなるべく使わないようにしてもいいと思います。
どのくらいのサイズにするかにもよりますが、
１０ＫＢ～１００ＫＢになればいいような気がします。

サーバー領域が問題にならないようであれば、
元のサイズと縮小サイズのふたつを保存してもいいかも知れません。
一覧などでは縮小サイズを表示して、
クリックしたら拡大表示するみたいな使い方です。
一覧で元サイズをダウンロードするとかなりの負荷になるでしょうから。

補足

Q.ファイルサイズが大きくてアップロードできなかったユーザーは、
いったん自分でリサイズなどしてファイルサイズを小さくしてアップロードすることになります。
面倒だとアップロードをあきらめるかも。
ユーザーもリサイズして、サーバーでもリサイズして、と言うこともあるかも知れません。

A.アドバイスありがとうございます。
なるほどサイズを小さくして負荷を減らしているわけですね。
データ通信料については盲点でした。確かにこれは重要ですね。
2重でリサイズする意味が理解できました。アップロード時の制限を緩くするためなんですね。
障壁を低くするほうがよさそうです。
画像の質に関しては出来るだけ落としたくないですね。ヤフー知恵袋やokwabeのように画質を保った状態で質問を投稿できるようにしたいです。イラストのサイトにする予定ですので、ここが一番重要かもしれません。

データベースの容量は問題ないのであとは処理の速度が問題になりそうですね。

MySQL® ディスク使用量
433.91 MB / 286.9 GB (0.15%)

回答No.8

dell_OK

・画像があるパスを保存する方法は知恵袋のほうで教えていただいたのですが、その進化系である拡張子を保存する方法が分かりません。

知恵袋で引き続き拡張子を保存する方法を教えていただいたらよかったのにと思うのですが・・・。
「※拡張子保存？」の参考サイトは拡張子保存については何も書かれてないようです。
「※トークンについて」の参考サイトにファイル名の変更処理で拡張子を付けているので、
これでいいのではないでしょうか。

ただ、アップロードファイルの拡張子を使用しているので、
その拡張子がどれほど信用できるのかと言う問題があります。
拡張子のないファイルや「.」が複数あるファイルを適切に処理できるかわかりません。

補足

回答ありがとうございます。※トークンについての参考サイトをもとに考えてみます。

回答No.7

dell_OK

・細かな疑問点なのですが、まずトークンについてです。こちらのcsrf対策はお問合せページでも出てきていたものです。必須だと参考サイトに書いてあるため送信フォームには導入を検討したほうが良さそうです。

私には必要性を判断することができませんので、
質問者さまが必要と思うのでしたら導入してみてください。

参考サイトのコードにさらりと目を通してみたところ、
不要な処理があったので指摘しておきます。
そのまま使っても問題ないとは思いますが、
質問者さまが「こう書かなければいけない」と思わないようにです。

関数内にある「global $_SESSION;」は不要です。
function setToken() {
global $_SESSION;←これ
function getToken() {
global $_SESSION;←これ

$_SESSIONはスーパーグローバル変数なので、
globalで明示しなくてもどこでも使えます。
記述してＰＨＰが処理するのか無視するのかはわかりませんが、
無駄な処理に違いありません。

https://www.php.net/manual/ja/language.variables.superglobals.php
ＰＨＰドキュメントにもglobalする必要はないと書かれています。

補足

アドバイスありがとうございます。コードは一部省いて考えてみます。

回答No.6

dell_OK

スタイルシートの読み込みはヘッダー処理でされているようです。
「get_header();」を追加してみてください。
場所はここで。
－－－－
// 不正アクセスチェック
if(!$noindexaccess || isBot()){
header("HTTP/1.0 404 Not Found");exit();
}
get_header();
echo '<div style="color:red;">';
－－－－

お礼

画像があるパスを保存する方法は知恵袋のほうで教えていただいたのですが、その進化系である拡張子を保存する方法が分かりません。
アドバイスお願い致します。

まず拡張子を保存する際に必要な機能を考えてみました。大まかな疑問点は1~5に書いたのですが、細かな疑問点も多々ありました。

細かな疑問点なのですが、まずトークンについてです。こちらのcsrf対策はお問合せページでも出てきていたものです。必須だと参考サイトに書いてあるため送信フォームには導入を検討したほうが良さそうです。

次にファイルのチェックになります。こちらは参考サイトを見るとphp.iniでも確認が入っており。これが必須であるのか分かりません。
Javascript側で一応1Mで制限を設けるコードを組んでいるのですが、様々なエラーチェックも後々に続いているためどこかが欠けると動作しないことにならないか心配です。
ユーザー側には注意分は見えるようになっているため重複するようにはしたくない、同じような機能をダブって実装させるのも如何なものかと悩んでおります。
また保存の際のリサイズがよく見られるのですが、こちらは速度に影響するものでしょうか？実装すべきかアドバイスいただきたいです。

リソースの生成、ファイルのパーミッションを確実に0644に設定ということが書いてあるのですが、これらの機能はどのような意味があるのでしょうか？

1,inputのtype=hiddenで、フォームの目的とトークンの、２つの隠しデータを送信？

csrf対策として有効な方法で、フォーム送信の安全性には欠かせないとあるが真偽は不明
2,ファイルサイズやファイルの未選択などのチェック(これはアップロード側のJavascriptでやっているので必要なのか不明)
3,ファイルを受信できたかチェック(偽造されていないか確認)
4,ファイルをサーバにup
5,サーバー側でサイズ変換して保存

※トークンについて
https://369code.tokyo/304/

※拡張子保存？
https://codeforfun.jp/save-images-php-and-mysql-3/

※恐らく一番の理想形
https://qiita.com/mpyw/items/73ee77a9535cc65eff1e

※ファイルのパーミッションを確実に0644に設定する
https://tips.recatnap.info/laboratory/detail/php_take_file_from_form

※最新コード(text-storage.phpに画像があるパスを保存する方法を書いています)
https://wandbox.org/permlink/03kfNxi9L1sy1ibR

補足

アドバイスありがとうございます。修正したところcssを読み込むことができました。
ヘッダーでcssをまとめて読み込ませていたことを忘れておりました。
拡張子を保存するコードを考えてみます。

回答No.5

dell_OK

・一時的に削除していて戻してみました。

スタイルはどこに記述しているのでしょうか。

補足

このcssは他のファイルにも効いていますので問題なさそうです。
デロッパツールで確認できないJavascriptによって打ち消されているからだと思われます。
enter-information.phpで直接cssを配置した場合スタイルが適応されたのですが、何故でしょうか？
<style>
.selected {
border: 3px solid red;
}

#my_image {
display: none; /* 本来のファイル選択フォームは非表示に */
}
</style>

※画像
https://imgur.com/JLdjMsA.jpg

※読み込ませているcss
https://wandbox.org/permlink/VkYgfYgJF3tGPJm8

回答No.4

dell_OK

・一応画像は表示されたのですが、cssでファイルを選択を非表示にすることができません。

以下のコードをどこに記述しているのかわかりませんが、
現在のコードには見当たりませんので、
サイトにも反映されていないのだと思います。
－－－－
#my_image {
display: none; /* 本来のファイル選択フォームは非表示に */
}
－－－－

補足

回答ありがとうございます。申し訳ありません、一時的に削除していて戻してみました。

※現在のコード
https://wandbox.org/permlink/dYP9mxF5RYV5coyG

回答No.3

dell_OK

・不安な点ですが、画像を別々に見える形で2つアップロード可能な形になっているのか

img-upload.php　でしょうか。
組み込んで動作確認してみてください。
組み込んでみたり、
参考サイト（https://catnose.me/learning/html/input-file）で確認してみましたが、
見える形にはなっていないようです。

・「ファイルを選択」のボタンを画像に変えるコードを作成したのですが、URLの引っ張り方を間違えている気がします。

そうですね。
src="camera-orange-rev.png"　の画像が必要です。
よそのサイトから直接参照するならプロトコル（http://）からのパスを記述するか、
自分のサイトに画像を置いておいてスタンプ画像のように記述するかです。

・どの方法が良さそうでしょうか？

データベースに保存するのは私も賛成しかねます。
保存するとなるとバイナリーデータになると思いますが、
バイナリーデータを画像として表示するのにも処理コストがかかりそうな気がします。

「画像があるパスを保存する(意味が不明)」ですが、
アップロードファイルの保存をフォルダ名とファイル名を合わせて保存する方法だと思います。
場合によってはフォルダ名は不要かも知れません。
アップロードしたファイルをWordPress管理下に保存する方法は調べていないのでわかりませんが、
WordPressの命令があるのかないのか、
あればおそらく　wp-content/uploads　フォルダになると思いますし、
なければ自由にフォルダを指定することになると思います。
いずれにしても、フォルダがただひとつしかなければフォルダ名は不要です。
ＰＨＰコードでフォルダ名を定数定義して使えばいいからで、
フォルダ名が全部同じなのでデータベースに保存しなくてもよくなり、
保存するのはファイル名だけになってきます。
ただ、WordPressの命令があってそれを使った場合は、
管理画面での画像アップロードと同様で、
年月フォルダに分かれてくると思いますので、
その場合はフォルダ名も付けて保存する必要があります。
ここではファイル名はアップロードされた元ファイルと同じ名前としておきます。

最後の「拡張子文字列だけを保存する(意味が不明)」ですが、
私はいつもこれでやっています。
ファイル名をデータベースに保存しなくてもよくなるからです。
なぜ保存しなくてもよくなるかと言うと、
参考サイトのその人も書かれていますが、
命名規則（レコードのID）に則ってファイル名を付けるからです。
書式としては　{ID}_{連番}　です。
sortableの主キーでもあるIDをファイル名に付けます。
アップロード画像がふたつあるとのことなので、
連番はひとつ目の画像が「1」、ふたつ目の画像が「2」です。
例えばＩＤが２５であればファイル名は「25_1」と「25_2」だとわかります。
そうだとわかるのであればデータベースに保存しなくてもいいと思うわけです。
ちなみに私はファイル拡張子も付けません。
たいていのブラウザがそのファイルの形式を判断していいように表示してくれるからです。
でも、コードを見る限り「.pdf」「.doc」があるので、
これらのファイルをどう表示されるつもりかによって話しは変わってきます。
あと、フォルダ名が固定か否かと言う問題は依然としてありますので、
それがわかってから決めた方がいいと思います。

関係ありませんが、
いただいた現在のコード　new-information.php　では、
選択したスタンプ画像が赤枠で囲まれません。
以下のコードの「selimg[select.value].classList.toggle('selected');」でエラーになっているためです。
エラーの原因は、このコードがコントロールの定義よりも前にあるからですが、
このコードとまったく同じものがコントロールの定義よりも後にもあります。
前にある方は削除してください。
－－－－
<script>
const select = document.querySelector('#select');
const selimg = document.querySelectorAll('.selimg');

selimg[select.value].classList.toggle('selected');

for (let i=0; i<selimg.length; i++) {
selimg[i].addEventListener('click', function() {
// 選択状態を移動
selimg[select.value].classList.toggle('selected');
select.value = i;
selimg[select.value].classList.toggle('selected');
});
}
<script>
－－－－

補足

Q.img-upload.php　でしょうか。
組み込んで動作確認してみてください。

A.回答ありがとうございます。一応画像は表示されたのですが、cssでファイルを選択を非表示にすることができません。
アドバイスお願い致します。

#my_image {
display: none; /* 本来のファイル選択フォームは非表示に */
}

※該当ページ
http://www.last.cfbx.jp/informtion/

Q.でも、コードを見る限り「.pdf」「.doc」があるので、
これらのファイルをどう表示されるつもりかによって話しは変わってきます。
あと、フォルダ名が固定か否かと言う問題は依然としてありますので、
それがわかってから決めた方がいいと思います。

A.pdfも表示できるようにしてみたいのですが、もう少し調べてみます。
フォルダ名はwp-content/uploadsから画像を表示させる機能をfunctions.phpで無効にしているため自作フォルダを作成して固定にすることも可能です。

Q.関係ありませんが、
いただいた現在のコード　new-information.php　では、
選択したスタンプ画像が赤枠で囲まれません。

A.削除いたしました。申し訳ありません。

※現在のコード
https://wandbox.org/permlink/Llb5JyL57sxXbjzK