Skip to main content
se añadieron 1921 caracteres en el cuerpo
Origen Enlace
Joe
  • 73
  • 4
  • 12

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>   
 Cancelar

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>   
 Cancelar
se añadieron 1993 caracteres en el cuerpo
Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42

heHe 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 formulario lo tengo asiEl 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;*/
/*}*/

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 formulario lo tengo asi

 <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>

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 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;*/
/*}*/
Origen Enlace
Joe
  • 73
  • 4
  • 12

Perfil de empleado con foto php

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 asi

 <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>