entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

como actualizar imagen con ajax a una ventana modal boostrap

hola buenas tardes, mi problema es el siguiente lo que quiero es agregar una imagenen una modal file mediante con ajax dejo el codigo a continuacion solo de la imagen lo demas si funciona ....

Acontinuacion mostrare el codigo de modificar del modal:

<form enctype="multipart/form-data" id="actualidarDatos">
<div class="modal fade" id="dataUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Modificar Empleado:</h4>
      </div>
      <div class="modal-body">
            <div id="datos_ajax"></div>
          <div class="form-group">
            <label for="matricula" class="control-label">
            <div align="center">Matricula:</div>
            </label>
            <div align="center">
              <input type="text" class="form-control" id="matricula" name="matricula">
              </div>
          </div>
                  <div class="form-group">
            <label for="nombre" class="control-label">
            <div align="center">Nombre:</div>
            </label>
            <div align="center">
              <input type="text" class="form-control" id="nombre" name="nombre" required>
              <input type="hidden" class="form-control" id="id_empleado" name="id_empleado">
              </div>
          </div>
          <div class="form-group">
            <label for="apellido" class="control-label">
            <div align="center">Apellido:</div>
            </label>
            <input type="text" class="form-control" id="apellido" name="apellido" required>
          </div>
          <div class="form-group">
            <label for="tipo_usuario" class="control-label">
            <div align="center">Tipo de usuario:</div>
            </label>
            <div align="center">
              <select name="tipo_usuario" class="form-control" id="tipo_usuario" name="tipo_usuario" required>
                  <option>Seleccione la opción</option>
                  <option>Administrador</option>
                  <option>Empleado</option>
                  </select>
              </div>
          </div>
          <div align="center"></div>
          <div class="form-group">
            <label for="domicilio" class="control-label">Domicilio:</label>
            <input type="text" class="form-control" id="domicilio" name="domicilio" required> 
          </div>
          <div class="form-group">
            <label for="tel_fijo" class="control-label">
            <div align="center">Telefono fijo:</div>
            </label>
            <input type="text" class="form-control" id="tel_fijo" name="tel_fijo" required>
          </div>
                  <div class="form-group">
            <label for="celular" class="control-label">
            <div align="center">Celular:</div>
            </label>
            <div align="center">
              <input type="text" class="form-control" id="celular" name="celular" required>
              </div>
          </div>
            <div class="form-group">
            <label for="imagen" class="control-label">
            <div align="center">Modificar Foto Perfil:</div>
            </label>
            <div align="center">
                <input type="file" class="form-control" name="imagen" required>
              </div>
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Actualizar datos</button>
      </div>
    </div>
  </div>
</div>
</form>

1voto

numero2222 comentado

aqui mostrare el codigo php de modificar modal:

<?php

# conectare la base de datos
<a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="94b0f7fbfaa9d4f9ede7e5f8fd">[email protected]</a><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script>_connect('localhost', 'root', '', 'svrgd2016');
if(!$con){
    die("imposible conectarse: ".mysqli_error($con));
}
if (@mysqli_connect_errno()) {
    die("Connect failed: ".mysqli_connect_errno()." : ". mysqli_connect_error());
}
/*Inicia validacion del lado del servidor*/
if (empty($_POST['matricula'])) {
       $errors[] = "Matricula vacío";
    } else if (empty($_POST['nombre'])){
        $errors[] = "Nombre vacío";
    } else if (empty($_POST['apellido'])){
        $errors[] = "Apellido vacío";
    } else if (empty($_POST['tipo_usuario'])){
        $errors[] = "Tipo_usuario vacío";
    } else if (empty($_POST['domicilio'])){
        $errors[] = "Domicilio vacío";
    } else if (empty($_POST['tel_fijo'])){
        $errors[] = "Tel_fijo vacío";
    } else if (empty($_POST['celular'])){
        $errors[] = "Celular vacío";
    } else if (empty($_FILES['imagen']['tmp_name'])){
        $errors[] = "imagen vacio";
    }   else if (
        !empty($_POST['matricula']) &&
        !empty($_POST['nombre']) && 
        !empty($_POST['apellido']) &&
        !empty($_POST['tipo_usuario']) &&
        !empty($_POST['domicilio']) &&
        !empty($_POST['tel_fijo']) &&
        !empty($_POST['celular'])&&
        !empty($_FILES['imagen']['tmp_name'])

    ){

    // escaping, additionally removing everything that could be (html/javascript-) code
    $matricula=mysqli_real_escape_string($con,(strip_tags($_POST["matricula"],ENT_QUOTES)));
    $nombre=mysqli_real_escape_string($con,(strip_tags($_POST["nombre"],ENT_QUOTES)));
    $apellido=mysqli_real_escape_string($con,(strip_tags($_POST["apellido"],ENT_QUOTES)));
    $tipo_usuario=mysqli_real_escape_string($con,(strip_tags($_POST["tipo_usuario"],ENT_QUOTES)));
    $domicilio=mysqli_real_escape_string($con,(strip_tags($_POST["domicilio"],ENT_QUOTES)));
    $tel_fijo=mysqli_real_escape_string($con,(strip_tags($_POST["tel_fijo"],ENT_QUOTES)));
    $celular=mysqli_real_escape_string($con,(strip_tags($_POST["celular"],ENT_QUOTES)));
    $imagen=addslashes(file_get_contents($_FILES['imagen']['tmp_name']));
    $nombreArchivo = $_FILES['imagen']['name'];
    $id_empleado=intval($_POST['id_empleado']);
    $sql="UPDATE empleado SET  matricula='".$matricula."', nombre='".$nombre."', apellido='".$apellido."', tipo_usuario='".$tipo_usuario."', domicilio='".$domicilio."', tel_fijo='".$tel_fijo."', celular='".$celular."', imagen='".$imagen."' WHERE id_empleado='".$id_empleado."'" ;
    $query_update = mysqli_query($con,$sql);
        if ($query_update){
            $messages[] = "Los datos han sido actualizados satisfactoriamente.";
        } else{
            $errors []= "Lo siento algo ha salido mal intenta nuevamente.".mysqli_error($con);
        }
    } else {
        $errors []= "Error desconocido.";
    }

    if (isset($errors)){

        ?>
        <div class="alert alert-danger" role="alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>Error!</strong> 
                <?php
                    foreach ($errors as $error) {
                            echo $error;
                        }
                    ?>
        </div>
        <?php
        }
        if (isset($messages)){

            ?>
            <div class="alert alert-success" role="alert">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>¡Bien hecho!</strong>
                    <?php
                        foreach ($messages as $message) {
                                echo $message;
                            }
                        ?>
            </div>
            <?php
        }

?>

1voto

numero2222 comentado

y aqui el ajax completo del sistema :

function load(page){
    var parametros = {"action":"ajax","page":page};
    $("#loader").fadeIn('slow');
    $.ajax({
        url:'paises_ajax.php',
        data: parametros,
         beforeSend: function(objeto){
        $("#loader").html("<img src='loader.gif'>");
        },
        success:function(data){
            $(".outer_div").html(data).fadeIn('slow');
            $("#loader").html("");
        }
    })
}

    $('#dataUpdate').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Botón que activó el modal
      var matricula = button.data('matricula') // Extraer la información de atributos de datos
      var nombre = button.data('nombre') // Extraer la información de atributos de datos
      var id_empleado = button.data('id_empleado') // Extraer la información de atributos de datos
      var apellido = button.data('apellido') // Extraer la información de atributos de datos
      var tipo_usuario = button.data('tipo_usuario') // Extraer la información de atributos de datos
      var domicilio = button.data('domicilio') // Extraer la información de atributos de datos
      var tel_fijo = button.data('tel_fijo') // Extraer la información de atributos de datos
      var celular = button.data('celular') // Extraer la información de atributos de datos
      var imagen = button.data('imagen') // Extraer la información de atributos de datos
      var modal = $(this)
      modal.find('.modal-title').text('Modificar Empleado: '+nombre)
      modal.find('.modal-body #id_empleado').val(id_empleado)
      modal.find('.modal-body #matricula').val(matricula)
      modal.find('.modal-body #nombre').val(nombre)
      modal.find('.modal-body #apellido').val(apellido)
      modal.find('.modal-body #tipo_usuario').val(tipo_usuario)
      modal.find('.modal-body #domicilio').val(domicilio)
      modal.find('.modal-body #tel_fijo').val(tel_fijo)
      modal.find('.modal-body #celular').val(celular)
      modal.find('.modal-body #imagen').val(imagen)
      $('.alert').hide();//Oculto alert
    })

$( "#actualidarDatos" ).submit(function( event ) {
    var parametros = $(this).serialize();
         $.ajax({
                type: "POST",
                url: "modificar.php",
                data: parametros,
                 beforeSend: function(objeto){
                    $("#datos_ajax").html("Mensaje: Cargando...");
                  },
                success: function(datos){
                $("#datos_ajax").html(datos);

                load(1);
              }
        });
      event.preventDefault();
    });

aqui esta el codigo si me podrian apoyar o ayudar como modificar la imagen de modal por favor :)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta