He creado una pagina para crear el perfil de un empleado, ya eso carga bien a la BD e inclusive pude agregar una foto, la sube bien a un folder que le designe y todo va bien.
El problema es que se me ocurrió que cuando se esta creando el perfil y se seleccione la imagen se puede ver a la par del formulario de los datos... pero el problema es que cuando selecciono la imagen y esta se previsualiza de una vez guardan los datos... esto sin darle el boton de enviar...
El formulario lo tengo así
<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>
Este es el 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>
Y este es el 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;*/
/*}*/
Con la respuesta de Camilo, cambié el codigo pero no me sirve.. estoes lo qu puse
<!DOCTYPE html>
Agregar Usuario
<!-- 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>