Como faço um código para enviar uma imagem ao selecioná-la durante o cadastro? E após enviada aparecer no formulário uma miniatura, para então o usuário continuar preenchendo o restante do formulário.
Semelhante ao que é feito nesse link.
Como faço um código para enviar uma imagem ao selecioná-la durante o cadastro? E após enviada aparecer no formulário uma miniatura, para então o usuário continuar preenchendo o restante do formulário.
Semelhante ao que é feito nesse link.
Para que consigas fazer upload de uma imagem para o servidor e após o envio com sucesso apresentar a mesma, precisas fazer uso de Ajax e preferencialmente um plugIn que já cuide de todo o trabalho de interagir com o servidor.
Segue o código essencial para a criação de um formulário em HTML e um ficheiro no lado do servidor para lidar com a chegada dos ficheiros e controlar minimamente os mesmos:
Este ficheiro, será o index.php
onde temos o HTML necessário para apresentar um formulário ao visitante, bem como incluir o jQuery e o jQuery Form Plugin modificado por Arun Sekar.
<!doctype html>
<html>
<head>
<title>Ajax Image Upload </title>
<style type="text/css">
body {
font-family:sans-serif;
}
#preview {
color:#cc0000;
font-size:12px
}
.imgList {
max-height:150px;
margin-left:5px;
border:1px solid #dedede;
padding:4px;
float:left;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.wallform.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#photoimg').die('click').live('change', function() {
$("#imageform").ajaxForm({
target: '#preview',
beforeSubmit: function(){
console.log('Antes de enviar');
$("#imageloadstatus").show();
$("#imageloadbutton").hide();
},
success:function(){
console.log('Envio com sucesso');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
},
error:function(){
console.log('Erro ao realizar operação');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
}
}).submit();
});
});
</script>
</head>
<body>
<div>
<div id='preview'></div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
<h1>Escolha as imagens a carregar</h1>
<div id='imageloadstatus' style='display:none'>
<img src="loader.gif" alt="A carregar....">
</div>
<div id='imageloadbutton'>
<input type="file" name="photos[]" id="photoimg" multiple="true">
</div>
</form>
</div>
</body>
</html>
Este ficheiro será o ajaxImageUpload.php
com o qual o PlugIn de jQuery vai interagir para enviar os dados da fotografia e receber informação se a mesma foi carregada com sucesso para o servidor, de forma a poder apresentar a mesma ao visitante sem o refresh da página.
<?php
error_reporting(0);
session_start();
define("MAX_SIZE","9000");
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) {
return "";
}
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$uploaddir = "uploads/"; // directoria que vai receber os ficheiros
foreach ($_FILES['photos']['name'] as $name => $value) {
$filename = stripslashes($_FILES['photos']['name'][$name]);
$size=filesize($_FILES['photos']['tmp_name'][$name]);
/* Recolhe extensão do ficheiro em caixa baixa (lowercase)
*/
$ext = getExtension($filename);
$ext = strtolower($ext);
if (in_array($ext,$valid_formats)) {
if ($size < (MAX_SIZE*1024)) {
$image_name=time().$filename;
$newname=$uploaddir.$image_name;
if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) {
/* ficheiro carregado com sucesso,
* envia HTML com imagem para apresentar ao visitante
*/
echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
} else {
echo '<span class="imgList">Ficheiro não foi carregado!</span>';
}
} else {
echo '<span class="imgList">Limite de tamanho atingido!</span>';
}
} else {
echo '<span class="imgList">Extensão do ficheiro desconhecida!</span>';
}
}
}
?>
O resultado da utilização do código em cima apresentado é o que pode ser visto neste GIF animado com 4 passos:
Podes fazer o download de todos os ficheiros necessários a partir da minha DropBox:
Link para ficheiro multiple_upload.zip.
De forma a melhor entenderes o que está a acontecer, segue uma explicação superficial dando conta da informação relevante para um entendimento de todo o processo:
O plugIn de jQuery vai estar atento ao formulário para que quando o utilizador escolhe um ficheiro, seja despoletada uma acção que vá enviar o mesmo para o servidor;
No lado do servidor, estamos a verificar/validar o ficheiro recebido e respondemos ao plugIn de jQuery enviando o HTML que pretendemos que ele aplique na página. Quando corre tudo como pretendemos, o HTML enviado é uma TAG img
com caminho para a imagem.
O plugIn de jQuery recebe então o HTML, apresenta o mesmo e desbloqueia o ace
Créditos desta solução para o web-site www.9lessons.info: Ajax Select and Upload Multiple Images with Jquery
Para simplesmente exibir a imagem na tela no ato da escolha, basta implementar o código js abaixo:
$("##ID DO INPUT FILE##").change(function (event) {
var reader = new FileReader();
$(reader).load(function (event) {
$("##ID DO ELEMENTO IMG##").attr("src", event.target.result);
});
reader.readAsDataURL(event.target.files[0]);
});