0

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">&nbsp;</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">&nbsp;</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>

1
  • ¿Puedes agregar el código del javascript y del php? Commented el 23 nov. 2017 a las 17:28

1 respuesta 1

1

Tu problema está en este código:

$("#imageform").ajaxForm({
    target: '#preview'
}).submit();

En ese código estás haciendo el submit para el formulario. Si lo que quieres es hacer un preview de la imagen te recomiendo lo siguiente:

$("#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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="fileToUpload" id="fileToUpload">              
<div id='preview'>
    
</div>

Básicamente lo que hacemos es convertir la imagen a formato base64 para poder visualizarla inmediatamente sin alterar el objeto de imagen que se envía al PHP.

6
  • Hola Camilo, gracias por la respuesta... vieras que no logro que me funcione. puse esto
    – Joe
    Commented el 27 nov. 2017 a las 23:56
  • <head> <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/…> <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> </head>
    – Joe
    Commented el 28 nov. 2017 a las 0:20
  • <pre> <body> <form method="post" enctype="multipart/form-data"> <input type="file" name="fileToUpload" id="fileToUpload"> <div id="preview"> </div> </form> </body> </pre>
    – Joe
    Commented el 28 nov. 2017 a las 0:23
  • Creo que es por que estas colocando el código en el <head>, colócalo al final del <body> Commented el 28 nov. 2017 a las 0:51
  • Hola Camil.... lo cambié como mencionaste y ta me funciono de lo mejor, muchas gracias.
    – Joe
    Commented el 28 nov. 2017 a las 1:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.