A experiência do usuário pode ser muito melhorada em um recurso de upload de imagem se permitirmos que o usuário visualize a imagem selecionada antes de enviá-la ao servidor clicando no botão de upload.
Neste tutorial, criaremos um formulário que recebe duas entradas:a foto do perfil do usuário (imagem) e sua biografia (texto). Quando o usuário preencher o formulário e clicar no botão de upload, usaremos nosso script PHP para pegar os valores do formulário (a imagem e a biografia) e salvar a imagem em nossa pasta de projeto chamada imagens. Assim que a imagem for salva na pasta do projeto, armazenaremos um registro no banco de dados contendo o nome da imagem e a biografia do usuário.
Depois de salvar essas informações, criaremos outra página que consulta os perfis de usuário do banco de dados e os exibe na página com a biografia de cada usuário em relação à foto do perfil.
Então vamos começar com a implementação.
Crie uma pasta de projeto e chame-a de image-preview-upload. Dentro desta pasta, crie um arquivo chamado form.php e uma pasta chamada imagens para armazenar as imagens.
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>Antes de falar sobre o formulário, vamos primeiro criar um arquivo de estilo chamado main.css para o formulário na pasta raiz do nosso projeto.
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;
}
Na primeira linha do nosso arquivo form.php, estamos incluindo um arquivo que contém nosso script PHP responsável por receber os valores do formulário e processá-los (ou seja, salvar a imagem na pasta de imagens e criar um registro correspondente na tabela de usuários no banco de dados).
Se você der uma olhada no formulário, verá que estamos configurando o valor da propriedade CSS para none; Estamos fazendo isso porque não queremos exibir o elemento de entrada HTML padrão para upload de arquivo. Em vez disso, vamos criar um elemento diferente e estilizá-lo da maneira que quisermos e, quando o usuário clicar em nosso elemento, usaremos JavaScript sob o capô para acionar o elemento de entrada do arquivo HTML que está oculto para nós.
Agora vamos adicionar os scripts responsáveis por acionar o elemento de entrada do arquivo e também exibir a imagem para visualização.
Crie um arquivo chamado scripts.js na raiz do seu aplicativo e adicione este código a ele:
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]);
}
}
Agora, quando o usuário clica na área da imagem redonda, a função triggerClick() acionará um evento de clique no elemento de entrada do arquivo oculto. Quando o usuário seleciona uma imagem, um evento onChange é acionado no campo de entrada do arquivo e podemos usar a classe FileReader() do JavaScript para exibir temporariamente a imagem para visualização.
Quando o usuário clicar no botão 'Salvar usuário', o formulário de entrada será enviado para a mesma página. Então, nessa mesma página form.php, estamos incluindo um arquivo processForm.php que contém o código para processar nosso formulário.
Então na pasta raiz do projeto crie um arquivo chamado 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";
}
}
}
?>
Este código recebe os valores de entrada enviados do formulário. Essa entrada consiste na imagem do usuário e na biografia. No servidor, podemos acessar o arquivo de imagem e todas as informações relacionadas à imagem, como nome, tamanho, extensão etc., na super variável global $_FILE[] enquanto outras informações, como texto, são encontradas em $_POST[] variável superglobal.
Usando as informações na variável super global $_FILE[], podemos validar a imagem. Por exemplo, nosso código-fonte só pode aceitar imagens cujos tamanhos sejam inferiores a 200kb. Claro, você sempre pode alterar esse valor, se quiser.
Você percebe no código acima que estamos nos conectando a um banco de dados chamado img-upload. Crie este banco de dados e crie uma tabela chamada users com os seguintes campos:
tabela de usuários:
CREATE TABLE `users` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`profile_image` varchar(255) NOT NULL,
`bio` text NOT NULL
)Agora abra o formulário no seu navegador e insira algumas informações. Se tudo correu bem, sua imagem será carregada para a pasta de imagens em seu projeto e um registro correspondente salvo no banco de dados.
Exibindo imagem do banco de dados
Uma vez que nossa imagem está no banco de dados, exibi-la é muito fácil. Crie um arquivo na pasta raiz e nomeie-o como profiles.php.
perfis.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>
Simples! Esse arquivo se conecta ao banco de dados, consulta todas as informações de perfil da tabela de usuários e lista os perfis de usuário em um formato tabular exibindo a imagem de perfil de cada usuário em sua biografia. Uma imagem é exibida simplesmente usando o nome da imagem do banco de dados e apontando para a pasta de imagens onde a imagem reside.
Conclusão
Espero que tenham gostado deste pequeno tutorial. Se você tiver alguma dúvida, deixe-a nos comentários abaixo.
Lembre-se de apoiar compartilhando.
Divirta-se.
