I have created a page to create an employee profile, and that's what I upload to the BD and I could even add a photo, upload it to a folder that designates it and everything is fine.
The problem is that it occurred to me that when the profile is being created and the image is selected, it can be seen next to the data form ... but the problem is that when I select the image and it is previewed once they save the data ... this without giving the send button ...
The form I have it like this
<form id="imageform" class="form-horizontal center-block" action="" method="post" enctype="multipart/form-data">
<div class="form-group"> <!-- Codigo -->
<label class="col-sm-4 control-label titulos1">Código</label>
<div class=" col-sm-3 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-barcode"></span></span>
<input type="text" name="codigo" class="form-control" placeholder="Código" required>
</div>
</div>
<div class="form-group"> <!-- Nombre Completo -->
<label class="col-sm-4 control-label">Nombre Completo</label>
<div class=" col-sm-6 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="nombres" class="form-control" placeholder="Nombre Completo" required>
</div>
</div>
<div class="form-group"> <!-- Correo Electrónico -->
<label class="col-sm-4 control-label">Correo Electrónico</label>
<div class=" col-sm-6 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="lugar_nacimiento" class="form-control" placeholder="Correo Electrónico" required>
</div>
</div>
<div class="form-group"> <!-- Teléfono -->
<label class="col-sm-4 control-label">Teléfono / Celular</label>
<div class=" col-sm-6 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
<input type="text" name="telefono" class="form-control" placeholder="Teléfono / Celular" required>
</div>
</div>
<div class="form-group"> <!-- Fecha de nacimiento -->
<label class="col-sm-4 control-label">Fecha de nacimiento</label>
</div>
<div class="col-md-4">
Subir imganes:
<input type="file" name="fileToUpload" id="fileToUpload">
<div id='preview'>
<!--<img class="center-block img-thumbnail" src="imges/default.png" width="300" height="300"> -->
</div>
<div class="form-group">
<label class="col-sm-3 control-label"> </label>
<div class="col-sm-9">
<input type="submit" name="add" class="btn btn-sm btn-primary" value="Guardar datos">
<a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>
</div>
</div>
</div>
</form>
This is javascript
<script type="text/javascript" >
$(document).ready(function() {
$('#fileToUpload').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Cargando...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
And this is PHP
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp");
/*if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){*/
echo "SI ENTRO 1 IF!!!";
$name = $_FILES['fileToUpload']['name'];
$size = $_FILES['fileToUpload']['size'];
/*echo "Este es el nombre del archivo ".$name."<br><br>";*/
if(strlen($name)){
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)){
if($size<(1024*1024)){
$actual_image_name = $name;
$tmp = $_FILES['fileToUpload']['tmp_name'];
/*echo "Este es el archivo : ". $tmp."<br><br>";*/
if(move_uploaded_file($tmp, $path.$actual_image_name)){
echo "<img src='uploads/".$name."' class='preview2 center-block img-thumbnail' width='300' height='300'>";
/*echo "Este es el archivo : ". $actual_image_name."<br><br>";*/
}else
echo "Error al cargar la imágen";
}
else
echo "La imagen pesa más de 1 mege";
}
else
echo "Formato de imagen incorrecto";
}
else
echo "Favor seleccionar imagen";
/*exit;*/
/*}*/
With Camilo's response, I changed the code but it does not work for me ... this is what I put
<!DOCTYPE html>
Add User
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" >
$("#fileToUpload").change(function(){
var imagen = $(this)[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(imagen);
reader.onload = function(){
var dataURL = reader.result;
$("#preview").html('<img class="center-block img-thumbnail" src="'+ dataURL +'" width="300" height="300">');
}
});
</script>
<div class="container">
<div class="content">
<form class="form-horizontal center-block" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<div id="preview">
</div>
<div class="form-group">
<label class="col-sm-3 control-label"> </label>
<div class="col-sm-9">
<input type="submit" name="add" class="btn btn-sm btn-primary" value="Guardar datos">
<a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>
</div>
</div>
</div>
</form>
</div>
</div>