ユーザーがアップロードボタンをクリックして実際にサーバーにアップロードする前に、選択した画像をプレビューできるようにすると、画像アップロード機能のユーザーエクスペリエンスを大幅に向上させることができます。
このチュートリアルでは、ユーザーのプロフィール写真（画像）とユーザーの略歴（テキスト）の2つの入力を受け取るフォームを作成します。ユーザーがフォームに入力してアップロードボタンをクリックすると、PHPスクリプトを使用してフォームの値（画像と略歴）を取得し、画像をimagesというプロジェクトフォルダーに保存します。画像がプロジェクトフォルダに保存されると、画像名とユーザーの略歴を含むレコードがデータベースに保存されます。
この情報を保存した後、データベースからユーザープロファイルをクエリする別のページを作成し、各ユーザーのプロフィール写真に対して各ユーザーの略歴をページに表示します。
それでは、実装を始めましょう。
プロジェクトフォルダーを作成し、それをimage-preview-uploadと呼びます。このフォルダ内に、form.phpというファイルと、画像を保存するためのimagesというフォルダを作成します。
form.php：
<?php include_once('processForm.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload PHP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4 form-div">
<a href="profiles.php">View all profiles</a>
<form action="form.php" method="post" enctype="multipart/form-data">
<h2 class="text-center mb-3 mt-3">Update profile</h2>
<?php if (!empty($msg)): ?>
<div class="alert <?php echo $msg_class ?>" role="alert">
<?php echo $msg; ?>
</div>
<?php endif; ?>
<div class="form-group text-center" style="position: relative;" >
<span class="img-div">
<div class="text-center img-placeholder" onClick="triggerClick()">
<h4>Update image</h4>
</div>
<img src="images/avatar.jpg" onClick="triggerClick()" id="profileDisplay">
</span>
<input type="file" name="profileImage" onChange="displayImage(this)" id="profileImage" class="form-control" style="display: none;">
<label>Profile Image</label>
</div>
<div class="form-group">
<label>Bio</label>
<textarea name="bio" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" name="save_profile" class="btn btn-primary btn-block">Save User</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script src="scripts.js"></script>フォームについて説明する前に、まず、プロジェクトのルートフォルダにフォームのmain.cssという名前のスタイリングファイルを作成しましょう。
main.css：
.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 60%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
width: 60%;
color: white;
height: 100%;
background: black;
opacity: .7;
height: 210px;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
}
.img-placeholder h4 {
margin-top: 40%;
color: white;
}
.img-div:hover .img-placeholder {
display: block;
cursor: pointer;
}
form.phpファイルの最初の行には、フォーム値の受信と処理（つまり、画像をimagesフォルダーに保存し、対応するレコードをusersテーブルに作成する）を担当するPHPスクリプトを含むファイルが含まれています。データベース内）。
フォームを見ると、CSSプロパティの表示の値がnoneに設定されていることがわかります。これを行うのは、ファイルアップロード用のデフォルトのHTML入力要素を表示したくないためです。代わりに、別の要素を作成して希望どおりにスタイルを設定し、ユーザーが要素をクリックすると、内部でJavaScriptを使用して、非表示になっているHTMLファイル入力要素をトリガーします。
次に、ファイル入力要素をトリガーし、プレビュー用に画像を表示するスクリプトを追加しましょう。
アプリケーションのルートにscripts.jsというファイルを作成し、次のコードを追加します。
script.js：
function triggerClick(e) {
document.querySelector('#profileImage').click();
}
function displayImage(e) {
if (e.files[0]) {
var reader = new FileReader();
reader.onload = function(e){
document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]);
}
}
これで、ユーザーが丸い画像領域をクリックすると、関数triggerClick（）が隠しファイルの入力要素でクリックイベントをトリガーします。ユーザーが画像を選択すると、ファイル入力フィールドでonChangeイベントがトリガーされ、JavaScriptのFileReader（）クラスを使用して、プレビュー用に画像を一時的に表示できます。
ユーザーが[ユーザーの保存]ボタンをクリックすると、入力フォームが同じページに送信されます。そのため、同じform.phpページに、フォームを処理するためのコードを含むprocessForm.phpファイルを含めています。
したがって、プロジェクトのルートフォルダーに、processForm.phpという名前のファイルを作成します;
processForm.php：
<?php
$msg = "";
$msg_class = "";
$conn = mysqli_connect("localhost", "root", "", "img-upload");
if (isset($_POST['save_profile'])) {
// for the database
$bio = stripslashes($_POST['bio']);
$profileImageName = time() . '-' . $_FILES["profileImage"]["name"];
// For image upload
$target_dir = "images/";
$target_file = $target_dir . basename($profileImageName);
// VALIDATION
// validate image size. Size is calculated in Bytes
if($_FILES['profileImage']['size'] > 200000) {
$msg = "Image size should not be greated than 200Kb";
$msg_class = "alert-danger";
}
// check if file exists
if(file_exists($target_file)) {
$msg = "File already exists";
$msg_class = "alert-danger";
}
// Upload image only if no errors
if (empty($error)) {
if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
$sql = "INSERT INTO users SET profile_image='$profileImageName', bio='$bio'";
if(mysqli_query($conn, $sql)){
$msg = "Image uploaded and saved in the Database";
$msg_class = "alert-success";
} else {
$msg = "There was an error in the database";
$msg_class = "alert-danger";
}
} else {
$error = "There was an erro uploading the file";
$msg = "alert-danger";
}
}
}
?>
このコードは、フォームから送信された入力値を受け取ります。この入力は、ユーザー画像と略歴で構成されます。サーバーでは、$ _ FILE []スーパーグローバル変数で画像ファイルと画像名、サイズ、拡張子などの関連するすべての画像情報にアクセスできますが、テキストなどの他の情報は$_POST[]で見つかります。スーパーグローバル変数。
$ _FILE []スーパーグローバル変数の情報を使用して、画像を検証できます。たとえば、ソースコードは、サイズが200kb未満の画像のみを受け入れることができます。もちろん、必要に応じていつでもこの値を変更できます。
上記のコードで、img-uploadというデータベースに接続していることがわかります。このデータベースを作成し、次のフィールドを使用してusersというテーブルを作成します。
ユーザーテーブル：
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)次に、ブラウザでフォームを開き、情報を入力します。すべてがうまくいけば、画像はプロジェクトの画像フォルダにアップロードされ、対応するレコードがデータベースに保存されます。
データベースからの画像の表示
画像がデータベースに登録されると、それを表示するのは簡単です。ルートフォルダにファイルを作成し、profiles.phpという名前を付けます。
profiles.php：
<?php
$conn = mysqli_connect("localhost", "root", "", "img-upload");
$results = mysqli_query($conn, "SELECT * FROM users");
$users = mysqli_fetch_all($results, MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Preview and Upload</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 offset-md-4" style="margin-top: 30px;">
<a href="form.php" class="btn btn-success">New profile</a>
<br>
<br>
<table class="table table-bordered">
<thead>
<th>Image</th>
<th>Bio</th>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td> <img src="<?php echo 'images/' . $user['profile_image'] ?>" width="90" height="90" alt=""> </td>
<td> <?php echo $user['bio']; ?> </td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
単純！このファイルはデータベースに接続し、usersテーブルからすべてのプロファイル情報を照会し、ユーザープロファイルを表形式で一覧表示して、各ユーザーのプロファイル画像を自分の略歴と照合します。データベースの画像名を使用し、画像が存在する画像フォルダをポイントするだけで、画像が表示されます。
結論
この短いチュートリアルを楽しんでいただけたでしょうか。ご不明な点がございましたら、下のコメント欄にご記入ください。
共有してサポートすることを忘れないでください。
楽しい時間をお過ごしください。