PHP MEMO

[test6.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像アップロードサンプル</title>
</head>
<body>
<hr>
<input type="file" id="file-input">
<img id="image" >
<pre id="file-content"></pre>
<br>
<button onclick="uploadFile()" >アップロード</button>
<br>
<h2>結果:</h2>
<p id="result" style="border: 1px solid #ccc; padding: 10px; min-height: 20px;">
	ファイルを選択して「アップロード」をクリックしてください。
</p>

if (!file) {
        result.textContent = 'ファイルが選択されていません。';
        return;
    }

result.textContent = 'アップロード中...';

const formData = new FormData();
    formData.append('image', file);

try {
        
        const response = await fetch('./img/test6.php', {
            method: 'POST',
            body: formData 
        });

if (!response.ok) {
            throw new Error('サーバーエラーが発生しました。');
        }
	const json = await response.json();
	
	if (json.status === 'success') {
result.textContent = 'アップロード成功: ' + json.message;
uploadedImage.src = json.file_url;
uploadedImage.style.display = 'block';
	} else {
result.textContent = 'アップロード失敗: ' + json.message;
	}
    } catch (error) {
        console.error('エラー:', error);
        result.textContent = '通信エラーまたはサーバーエラーが発生しました。';
    }
}
const fileInput = document.getElementById('file-input');
const fileContentElement = document.getElementById('file-content');
const image = document.getElementById('image');
image.style.display = "none";
 
let fileType = 0;
 
fileInput.addEventListener('change', (event) => 
{
const file = event.target.files[0];
if (!file) 
{
	return;
}
 
const reader = new FileReader();
 
reader.onload = (e) => {
	const content = e.target.result;
	if(fileType == 0)
	{
fileContentElement.textContent = content;
fileContentElement.style.display = "block";
image.style.display = "none";
	}
	else
	{
fileContentElement.textContent = "";
image.src = content;
fileContentElement.style.display = "none";
image.style.display = "block";
	}
};
 
reader.onerror = (e) => {
	console.error('it occur error to load file.', e);
	fileContentElement.textContent = 'it cannot read file.';
};
if(file.type.startsWith("image/"))
{
	fileType = 1;
	reader.readAsDataURL(file, 'UTF-8');
}
else
{
	fileType = 0;
	reader.readAsText(file);
}
});
</script>
</body>
</html>

[test6.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Image Upload Sample</title>
</head>
<body>
<hr>
<input type="file" id="file-input">
<img id="image" >
<pre id="file-content"></pre>
<br>
<button onclick="uploadFile()">Upload</button>
<br>
<h2>Result:</h2>
<p id="result" style="border: 1px solid #ccc; padding: 10px; min-height: 20px;">
    Select a file and click “Upload”.
</p>
<script>
async function uploadFile() {
    const fileInput = document.getElementById(‘file-input’);
    const result = document.getElementById(‘result’);
    const uploadedImage = document.getElementById(‘image’);
    const file = fileInput.files[0];

if (!file) {
    result.textContent = ‘No file selected.’;
    return;
}

result.textContent = ‘Uploading...’;

const formData = new FormData();
    formData.append(‘image’, file);

try {
        
        const response = await fetch(‘./img/test6.php’, {
            method: ‘POST’,
            body: formData 
        });

if (!response.ok) {
            throw new Error(‘Server error occurred.’);
        }
        const json = await response.json();
        
        if (json.status === ‘success’) {
            result.textContent = ‘Upload successful: ’ + json.message;
            uploadedImage.src = json.file_url;
uploadedImage.style.display = ‘block’;
        } else {
            result.textContent = ‘Upload failed: ’ + json.message;
        }
    } catch (error) {
        console.error(‘Error:’, error);
        result.textContent = ‘A communication error or server error occurred.’;
    }
}
const fileInput = document.getElementById(‘file-input’);
const fileContentElement = document.getElementById(‘file-content’);
const image = document.getElementById(‘image’);
image.style.display = “none”;
 
let fileType = 0; 
 
fileInput.addEventListener(‘change’, (event) => 
{
    const file = event.target.files[0];
    if (!file) 
    {
        return;
    }
 
    const reader = new FileReader();
 
    reader.onload = (e) => {
        const content = e.target.result;
	if(fileType == 0)
        {
            fileContentElement.textContent = content;
            fileContentElement.style.display = “block”;
            image.style.display = “none”;
        }
        else
        {
            fileContentElement.textContent = “”;
            image.src = content;
fileContentElement.style.display = “none”;
            image.style.display = “block”;
        }
    };
 
    reader.onerror = (e) => {
        console.error(‘An error occurred while loading the file.’, e);
        fileContentElement.textContent = ‘The file could not be read.’;
    };
if(file.type.startsWith(“image/”))
    {
        fileType = 1;
        reader.readAsDataURL(file, ‘UTF-8’);
    }
    else
    {
        fileType = 0;
        reader.readAsText(file);
    }
});
</script>
</body>
</html>

copy

[test6.php]
header('Content-Type: application/json; charset=UTF-8');

$response = [];
$uploadDir = 'uploads/'; // 保存先ディレクトリ

if (!is_dir($uploadDir)) {
	mkdir($uploadDir, 0755, true);
}

if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
	$fileTmpPath = $_FILES['image']['tmp_name'];
	$fileName = basename($_FILES['image']['name']);//パスを除くファイル名を取得
	$fileNameCmps = explode(".", $fileName);
	$fileExtension = strtolower(end($fileNameCmps));
	$newFileName = md5(time() . $fileName) . '.' . $fileExtension;
	$destPath = $uploadDir . $newFileName;

	$allowedfileExtensions = array('jpg', 'png', 'gif', 'jpeg');
	if (in_array($fileExtension, $allowedfileExtensions)) {
		// ファイルを一時ディレクトリから指定の場所に移動
		if (move_uploaded_file($fileTmpPath, $destPath)) {
			$response['status'] = 'success';
			$response['message'] = 'ファイルが正常にアップロードされました。';
			//$response['file_url'] = $destPath; // ブラウザからアクセスできるURL
			$response['file_url'] = 'img/' . $destPath;
		} else {
			$response['status'] = 'error';
			$response['message'] = 'ファイルの移動に失敗しました。ディレクトリの書き込み権限を確認してください。';
		}
	} else {
		$response['status'] = 'error';
		$response['message'] = '許可されていないファイル形式です。';
	}
} else {
	$response['status'] = 'error';
	$response['message'] = 'ファイルアップロードエラー。';
}

// JSONを返す
echo json_encode($response);

copy

[test6.php]
header(‘Content-Type: application/json; charset=UTF-8’);

$response = [];
$uploadDir = ‘uploads/’; // Destination directory

if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

if (isset($_FILES[‘image’]) && $_FILES[‘image’][‘error’] === UPLOAD_ERR_OK) {
    $fileTmpPath = $_FILES[‘image’][‘tmp_name’];
    $fileName = basename($_FILES[‘image’] [『name』]);//Get filename excluding path
    $fileNameCmps = explode(「.」, $fileName);
    $fileExtension = strtolower(end($fileNameCmps));
    $newFileName = md5(time() . $fileName) . 『.』 . $fileExtension;
    $destPath = $uploadDir . $newFileName;

    $allowedfileExtensions = array(‘jpg’, ‘png’, ‘gif’, ‘jpeg’);
    if (in_array($fileExtension, $allowedfileExtensions)) {
        // Move file from temporary directory to specified location
        if (move_uploaded_file($fileTmpPath, $destPath)) {
    $response[‘status’] = ‘success’;
    $response[‘message’] = ‘File uploaded successfully.’;
    //$response[‘file_url’] = $destPath; // URL accessible from browser
            $response[‘file_url’] = ‘img/’ . $destPath;
} else {
    $response[‘status’] = ‘error’;
    $response[‘message’] = ‘Failed to move the file. Please check the directory write permissions.’;
}
} else {
    $response[‘status’] = ‘error’;
        $response[‘message’] = ‘Unsupported file format.’;
    }
} else {
    $response[‘status’] = ‘error’;
    $response[‘message’] = ‘File upload error.’;
}

// Return JSON
echo json_encode($response);

$FILES関数

キー名	説明	値の例
name	html側で選択した元のファイル名	post.png
type	ファイルのMIMEタイプ	image/png
size	アップロードされたファイルのバイト単位のサイズ	10000(およそ10KB)
tmp_name	サーバ上での一時保存されたファイルのパスとファイル名	/tmp/abc123
error	エラーコード(アップロードの成功有無)	0(UPLOAD_ERR_OK)

basename($_FILES['image']['name']);/

basenameを使用することでパスを除いたファイル名を取得することができます。
これはブラウザによってはフルパスが入ってくることがある(古いブラウザ)ケース
そして悪意あるリクエストの対策としてファイル名のみを抽出することを目的としています。
/etc/passwordというフォルダパスとパスワードファイルがあると仮定します。
任意の場所に保存できてしまうということは
この場所に上書き保存をする攻撃を受けてしまうとシステムが正常に動作しなくなる原因となります。
このような攻撃に対する対策として不要なパスは除外する方法をとることが望ましいといえます。

strtolower(end($fileNameCmps))

end関数
配列の内部ポインタを採取要素に移動し
その最終要素の値を返す関数です。

explode(".", $fileName)

を使用するとファイル名と拡張子の2個の配列要素ができます。
そこでend関数を使うと拡張子を取得できます。
※拡張子が存在することを前提とした話となります。

$newFileName = md5(time() . $fileName) . '.' . $fileExtension;

md5関数
PHPの組み込み関数です。
指定された文字列のMD5ハッシュ値を計算します。
常に32文字の16進数(ハッシュ値)を生成します。
不可逆な変換であり、ハッシュ値から元の文字列を復元することは困難と言われています。
time関数
Unixタイムスタンプを返します。
※1970年1月1日00:00:00 UTCからの経過秒数を表す整数の値です。

in_array($fileExtension, $allowedfileExtensions)

in_array関数は特定の要素が配列の中に存在するかを判定し
見つかった場合はtrue
見つからなかった場合はfalse
を返します。

$response['status'] = 'success';

$response['message'] = 'ファイルが正常にアップロードされました。';
判定した結果を判定結果ごとに上記のように配列設定します。
この配列をjson_encodeを使用して出力することで
html側で受け取ることができ、その結果を判定した内容をユーザが見る画面上で確認できるようにしています。