0

Necesito ayuda :( estoy creando un formulario de registro de usuario, puedo guardar sin problemas los datos de los inputs pero quiero sumarle más una foto de perfil, he intentado buscar información pero termino mareandome y no se como podría implementarla, los campos que pide el registro de nuevo usuario son los siguientes:

Nombre:
Correo:
Password:
Pais:

-Subir Foto-

He creado una tabla en la bd mysql, donde se van a alojar los datos hasta donde he buscado lo mas recomendable es guardar la imagen dentro de una carpeta creada dentro del proyecto, y generar la url con ella se registrará en la bd es decir los 4 campos de nombre, correo, password, país más el campo imagen para guardar los datos en la tabla de la bd estoy usando ajax dentro en mi archivo js.

Archivo register.html

 <!DOCTYPE html>
<html>
<head>
	<title>Registrar usuario</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<label>Nombre: </label><input type="text" name="nombre_x" id="nombre_x"> <br><br>
<label>Correo:</label><input type="text" name="correo_x" id="correo_x"> <br><br>
<label>Password</label>:<input type="text" name="pass_x" id="pass_x"> <br><br>
<label>País:</label>
	<select name="pais_x" id="pais_x">
		<option>seleccioar</option>
		<option>pais1</option>
		<option>pais2 </option>
		<option>pais3</option>
	</select> <br><br>
foto:<input type="file" id="foto_x" name="foto_x"><br><br>

<button type="button"id="guardardatos"> Grabar</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
    $('#guardardatos').click(function(){
      nombre_x=$('#nombre_x').val();
      correo_x=$('#correo_x').val();
      pass_x=$('#pass_x').val();
      pais_x=$('#pais_x').val();

        RegistrarNuevo(nombre_x,correo_x,pass_x,pais_x,foto_x);

    });

});
</script>
</html>

Archivo AgregarNuevoUsuario.php

<?php 

require_once "conexion.php";
$conexion=conexion();
$id_usuario=$_POST['id_user'];
$nombre_x=$_POST['nombre_x'];   
$correo_x=$_POST['correo_x'];   
$pass_x=$_POST['pass_x'];
$pais_x=$_POST['pais_x'];


$sql="INSERT into tbl_nuevo_usuario (
    nombre_x, correo_x, pass_x, pais_x, vNumDocIdent,
    vApePaterno, vApeMaterno, vPriNombre, vSegNombre,
    vTelMovil, vTelFijo, vNacionalidad, vOcupacion,
    vDomicilio, vFechaNac, vFechaRegistro,
    vHoraRegistro, vPostalCli, vUserName
  ) values (
    '$nombre_x',
    '$correo_x',
    '$pass_x',
    '$pais_x'
)";
echo $result=mysqli_query($conexion,$sql);?>

archivo funcion.js

<script type="text/javascript">
 function RegistrarNuevo(){
   cadena="nombre_x=" + nombre_x +
     "&correo_x=" + correo_x +
     "&pass_x=" + pass_x +
     "&pais_x=" + pais_x;
   $.ajax({
      type:"POST",
      url:"AgregarNuevoUsuario.php",
      data:cadena,
      success:function(r){
        if(r==1){
          alert("se ha registrado correctamente");
        }else{
          alert("error, no hay conexión");
        }
      }
   });}
 </script>

No es mi register original acabo de improvisar uno, he filtrado varias cosas que son de css, el objetivo del formulario es guardar todo en la tabla tbl_nuevo_usuario que guarde los 5 campos no es necesario mostrar en otra pagina solo que se aloje en la tabla de la bd, de antemano agradezco la ayuda, llevo 2 dias estancado en el tema de las imágenes y no doy con una solución :c

No se si está bien haber usado ajax, ya que dentro de un menú que tengo después de que el cliente ya tiene cuenta, puede hacer operaciones usando tablas dinámicas y allí es donde hago uso de ajax para no actualizar la pagina a cada momento, inicialmente el register.html estaba usando las etiquetas <form>.

3 respuestas 3

1
esta seria una menera facil de hacerlo ya las validaciones depende de ti


 <!DOCTYPE html>
<html>
<head>
    <title>Registrar usuario</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="form" action="insertar.php" method="post" enctype="multipart/form-data">
<label>Nombre: </label><input type="text" name="nombre_x" id="nombre_x"> <br><br>
<label>Correo:</label><input type="text" name="correo_x" id="correo_x"> <br><br>
<label>Password</label>:<input type="text" name="pass_x" id="pass_x"> <br><br>
<label>País:</label>
    <select name="pais_x" id="pais_x">
        <option>seleccioar</option>
        <option>pais1</option>
        <option>pais2 </option>
        <option>pais3</option>
    </select> <br><br>
foto:<input type="file" id="foto_x" name="foto_x"><br><br>

<button type="button"id="guardardatos"> Grabar</button>

</form>



</body>

</html>

archivo php

 <?php

    require_once("conexion.php");

    $nombre=$_POST["nombre_x"];
    $pass=$_POST["pass_x"];
    $correo=$_POST["correo_x"];
    $pais=$_POST["pais_x"];


    $foto = $_FILES['foto_x']['name'];

    $cd=$_FILES['foto_x']['tmp_name'];

    $destino = "img/".$foto;//guardamos  la imagen en una carpeta llamada img
    $resultado = move_uploaded_file($cd, $ruta);//movemos la ruta provicional de la imagen 

    if (!empty($resultado)){

                    @mysqli_query($conexion,"INSERT INTO fotos(nombre,correo,pass,pais,foto) VALUES ('". $nombre."' ,'" . $correo . "','" . $pass. "','" . $pais . "','" . $foto . "')"); 
                    echo "el archivo ha sido movido exitosamente";

                    }else{

                        echo "Error al subir el archivo";

                        }
    ?>

archivo ajax

<script type="text/javascript">
$(document).ready(function(){
    $('#guardardatos').click(function(){
      nombre_x=$('#nombre_x').val();
      correo_x=$('#correo_x').val();
      pass_x=$('#pass_x').val();
      pais_x=$('#pais_x').val();
$.ajax({

url:"ruta.php",
type:"POST",
data:$("#form").serialize(),
success:function(response){

   alert(response)
}

 })


    });

});
</script>
0

Te dejo un ejemplo completo desarrollado hasta el momento de almacenar la imagen.

Creo que con él podrás aprender la forma correcta de atajar este tipo de soluciones.

Te explico un poco...

Formularios HTML

Los formularios HTML contemplan 3 tipos de codificación para su envio

  • application/x-www-form-urlencoded (the default)

  • multipart/form-data

  • text/plain

Se emplean para los siguiente usos.

  • application/x-www-form-urlencoded > Es el metodo que estás utilizando actualmente, enviar los datos en la cabezera de la petición (POST) con los datos contenidos en una cadena. Por defecto.

  • multipart/form-data > Esto es algo más complicado de explicar, pero puede contener los datos de archivos, imágenes, se implemento en
    HTML4.

  • text/plain > HTML5, solo para debug. No implementar. Los datos se ennvian en texto plano.

Obverva en el ejemplo su uso mediante el atributo del formulario:

enctype="multipart/form-data"

El encapsulado de información de forma fácil y rápida con el método de javascript:

var formData = new FormData( ... );

AJAX

La petición AJAX es simple, recuerda que como data podemos enviar también un conjunto clave/valor, gracias a FormData podemos obtenerlo fácilmente de un formulario.

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

PHP

Utilizando la codificación "multipart/form-data" recibirás en php:

(Array) $_POST > Conjunto clave : valor del formulario.

Ej. echo $_POST['Usuario']; Output: 'Bob'

(Array) $_FILES > Conjunto clave : valor del archivos recibidos del formulario.

Ver documentación

SOLUCIÓN

PHP + HTML

<?php
// Aquí debes recibir los elementos tipo input, información de debug
print_r($_POST);
// Aquí debes recibir las imagenes, información de debug
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="Usuario" value="Bob" />
    <input type="text" name="Apellido" value="James" />
    <input type="text" name="Apellido2" value="Smith" />
    <input name="foto-perfil" type="file" />
    <button>Guardar</button>
</form>

JQUERY + AJAX

$("form#data").submit(function(e) {

    // Desactivo funcionamiento form
    e.preventDefault();


    var formData = new FormData(this);

    $.ajax({
       url: window.location.pathname,
       type: 'POST',
       data: formData,
       success: function (data) {
           alert(data)
       },
       cache: false,
       contentType: false,
       processData: false
   });
});

En este punto existen varias posibilidades, yo te recomiendo guardar la imagen en un ruta en tu servidor y alacenar la dirección en la base de datos, en el siguiente ejemplo te muestro como almacenarlo desde php basandose en mi ejemplo anterior

EJEMPLO DE ALMACENAMIENTO DE IMAGEN CON PHP

$dir_subida = '/dir/donde/guardar/';

// Aquí puedes almacenar el archivo con cualquier nombre, yo para no complicar el ejemplo y realizarlo lo más completo posible, almacenaré el nombre original de la imagen recibida

$fichero_subido = $dir_subida . basename($_FILES['fichero_usuario']['name']);

if (move_uploaded_file($_FILES['fichero_usuario']['tmp_name'], $fichero_subido)) {
    echo "El fichero es válido y se subió con éxito.\n";
    // Debes almacenar en tu DDBB la ruta contenida en $fichero_subido
    // ...
} else {
    echo "¡Posible ataque de subida de ficheros!\n";
}
0

Creo que ya tienes el primer paso, ahora por ajax es un buen método, si tu intención es no cargar la página y que todo actúe sobre la misma:

El primer paso es agregar el contenedor para el elemento de imagen:

<input type="file" id="photo">

Ahora, modificando un poco tu versión de función, quedaría algo parecido a:

Evento que acciona la función:

    $(document).ready(function(){
        $('#guardardatos').click(function(e){
              e.preventDefault();
              var url = 'tu/url/AgregarNuevoUsuario.php';
              var nombre_x=$('#nombre_x').val();
              var correo_x=$('#correo_x').val();
              var pass_x=$('#pass_x').val();
              var pais_x=$('#pais_x').val();

              RegistrarNuevo(url, '#photo', nombre_x, correo_x, pass_x, pais_x);
         });
    });

Función:

function RegistrarNuevo(url, photo, nombre, correo, pass, pais){
    var archivos = $(photo)[0];
    var archivos = new FormData();
    /**
     * Se agregan los valores a enviar, aparte de la imagen
     * [nombre de la variable POST, variable js]
     */
    archivos.append('nombre_x', nombre);
    archivos.append('correo_x', corre);
    archivos.append('pass_x', pass);
    archivos.append('pais_x', pais);
    $.ajax({
      url:url,
      type:'POST',
      contentType:false, //Debe estar en false para que pase el objeto sin procesar
      data:archivos, //Le pasamos el objeto que creamos con los archivos
      processData:false, //Debe estar en false para que JQuery no procese los datos a enviar
      cache:false,
      success: function(data){
         //Lo que quieres que retorne tu función php
         console.log(data);
      },
      error: function (jqXHR, exception) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        console.log(msg);
    },
});
}

El php ya lo manejas como desees aquí un ejemplo

Tu Respuesta

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