0

Muy buenas tardes.

Necesito subir una foto al servidor; soy novato en el tema por lo que necesito una guía. Mi necesidad es cargar una foto, con un sólo botón y que no haga submit, porque tengo un botón guardar (Funciona correctamente) y éste debe ejecutarse al final cuando el usuario haga click en el botón... Usé muchas ayudas y todas tienen 2 botones, el primero busca la foto y el segundo llama a un upload.php para subirla, eso funciona perfecto.

Encontré una ayuda que no es necesariamente de fotos y utiliza varios botones, https://olgacarreras.blogspot.com/2007/02/formulario-con-varios-botones.html

Pero siento que arregló unas cosas perono lo comprendo bien y no controlo otras.

Peeeero, comienzan muchos problemas: 1) Tengo varios botones al hacer click, ejecuta siempre el Submit y ejecuta el action del FORM. Entonces ahora tengo que usar FomDATA que tampoco comprendí.

2) Al quitar el Form funcionan muy bien los botones que llaman a fusiones, como por ejemplo "generar clave", funciona muy bien (ahora).

3) Al presionar el botón foto y otro subir, lo coloco abajo para que lo carguen de último. Se supone que al cargar la foto está todo listo y al presionar llama a un php que carga el archivo, hasta allí todo bien, sólo que al cargar la foto (Ahora) no se ejecuta el botón guardar.

En conclusión, necesito cargar la foto igual a como genero la clave, que se refresca el "Text" de la clave.

Hice muchos códigos pero éstos dos son los mas cercanos pero no me sirven: Ambos códigos tienen muchas cajas de texto, los cuales suprimí y dejé solo la clave, para que el código no sea muy largo. Tampoco incluyo el código Guardar.php, porque funciona sin la generación de clave y sin la foto.

El primer código tiene FORM y el segundo NO, tampoco botón guardar ya que no se usar el FormDATA.

De nuevo muchas Gracias.

<!--*************** Primer código ***************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Prueba JAVASCRIPT</title>
        <script>
            function GenerarClave() {
                c1 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c2 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c3 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c4 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c5 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c6 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                document.getElementById("txtClave").value = c1+c2+c3+c4+c5+c6;
            }

            function subirfoto() {
                //alert(document.getElementById("btnFoto").value);
                alert('No encontré forma de Subir la foto con JavaScript');
            }
        </script>
    </head>
    <body>
        <form action="guardar.php" method="post" enctype="multipart/form-data" id="frmGuardar">
            <form action="cargafoto.php" method="post" enctype="multipart/form-data" id="frmFoto">
                <button onclick="GenerarClave()" id="btnGClave" name="btnGClave" formnovalidate>Generar Clave</button>
                <input id="txtClave" value="" placeholder="Clave de Acceso">
                <br><br><br><br>
                Seleccione la foto:<br>
                <input type="file" name="fileToUpload" id="btnFotoPHP">
                <input type="submit" value="Cargar" name="submit"  onclick="GenerarClave()">
            </form>
            <button data-placement="top" title="Guardar Información." id="btnGuardar" class="btn btn-success" type="submit" style="font-size: 16px; width:150px; height:40px;"><i class="icon-signin icon-large"></i> GUARDAR </button>
        </form>
    </body>
</html>
<!--*************** CargarFoto.php ***************-->
<?php
    $target_dir = "alumnos/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

    //echo '1';

    // Check if image file is a actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
        if($check !== false) {
            echo "El archivo es una imagen - " . $check["mime"] . ". <br>";
            $uploadOk = 1;
        } else {
            echo "El archivo no es una imagen.";
            $uploadOk = 0;
            exit(0);
        }

        //else exit(0);
        //echo '2';
        // Check if file already exists
        if (file_exists($target_file)) {
            echo "El archivo ya existe.";
            $uploadOk = 0;
            //$_POST['txtFoto'] = basename( $_FILES["fileToUpload"]["name"]);
            exit(0);
        }
        //echo '3';
        // Check file size
        if ($_FILES["fileToUpload"]["size"] > 500000) {
            echo "El archivo es demasiado grande.";
            $uploadOk = 0;
            exit(0);
        }
        //echo '4';
        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" ) {
            echo "Formatos admitidos: JPG, JPEG, PNG & GIF.";
            $uploadOk = 0;
            exit(0);
        }
        // Check if $uploadOk is set to 0 by an error
        //echo '5';
        if ($uploadOk == 0) {
            echo "Hubo un un problema, no se pudo subir la foto.";
            exit(0);
            // if everything is ok, try to upload file
        } else {
            if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
                echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " la imagen subida.";
                $_POST['txtFoto'] = basename( $_FILES["fileToUpload"]["name"]);
            } else {
                echo "Hubo un un problema, no se pudo subir la foto.";
                exit(0);
            }
        }
    }
    //echo '6';
    include("guardar.php"); // ésto no debería ir aquí....
?>

<!--*************** Segundo código ***************-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Prueba JAVASCRIPT</title>
        <script>
            function GenerarClave() {
                c1 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c2 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c3 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c4 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c5 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                c6 = String.fromCharCode((Math.floor((Math.random() * 70)) % 120) + 48);
                document.getElementById("txtClave").value = c1+c2+c3+c4+c5+c6;
            }

            function subirfoto() {
                //alert(document.getElementById("btnFoto").value);
                alert('No encontré forma de Subir la foto con JavaScript');
            }
        </script>
    </head>
    <body>
        <button onclick="GenerarClave()" id="btnGClave" name="btnGClave" formnovalidate>Generar Clave</button>
        <input id="txtClave" value="" placeholder="Clave de Acceso">
        <br><br><br><br>
        <input type="file" id="btnFoto" onchange="subirfoto()"></label>
        <br><br><br><br>
    </body>
</html>

1 respuesta 1

0

Lo que puedes hacer es convertir la foto a base64 para mandarla como texto, en mi experiencia es la forma mas sencilla

/* JS */
function getBase64(element) {
    return new Promise(function(resolve){
        var file = element.files[0];
        var reader = new FileReader();
        reader.onloadend = function() {
            resolve(reader.result)
        }
        reader.readAsDataURL(file);
    })
}

function guardar(){
    var inputFoto = document.getElementById('btnFoto')
    var inputClave = document.getElementById('txtClave')

    getBase64(inputFoto)
    .then(function(base64){
        $.ajax({
            method: "POST",
            url: "guardarFoto.php",
            data: { 
                clave: inputClave.value, 
                imagen: base64 
            }
        })
        .done(function( msg ) {
            alert( "Data Saved: " + msg );
        });
    })
}

$('#formulario').on('submit', function(e){
    e.preventDefault()
    guardar()
})


/* HTML */

<form id="formulario">
    <button onclick="GenerarClave()" id="btnGClave" name="btnGClave" formnovalidate>Generar Clave</button>
    <input id="txtClave" value="" placeholder="Clave de Acceso">
    <br><br><br><br>
    <input type="file" id="btnFoto"></label>
    <br><br><br><br>
    <input type="submit" value="Enviar" />
</form>


/* guardarFoto.php */

$clave = $_POST['clave'];
$data = $_POST['imagen'];

if (preg_match('/^data:image\/(\w+);base64,/', $data, $type)) {
    $data = substr($data, strpos($data, ',') + 1);
    $type = strtolower($type[1]); // jpg, png, gif

    if (!in_array($type, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
        throw new \Exception('invalid image type');
    }

    $data = base64_decode($data);

    if ($data === false) {
        throw new \Exception('base64_decode failed');
    }
} else {
    throw new \Exception('did not match data URI with image data');
}

file_put_contents("img.{$type}", $data);
4
  • Si, justamente esa es la dificultad que tengo, no puedo usar 2 botones para la foto, y otra cosa cuando presiono el botón subir, allí se me cierra la pantalla, pero veo tu excelente idea "function guardar()" que esa no la habría logrtado hacer, lo que tendría que hacer es convertir los dos botones en uno sólo, y como es de tipo "file", no me causaría conflicto con el botón guardar de del formulario, ahora "<button onclick="GenerarClave()" id="btnGClave" name="btnGClave" formnovalidate>" imagino que éste aunque tendría internamente algo equivalente a submit, se ejecuta a una función javascript Commented el 29 dic. 2019 a las 7:05
  • dentro del mismo formulario. Muy agradecido, en un rato realizo las pruebas y te informo a cerca de los resultados. Commented el 29 dic. 2019 a las 7:07
  • Muy buenos días. Al indicar <form id="formulario"> el formulario se me refresca y pierdo todo, imagina que antes hubiera 3 "text", se borran, no se que hacer, si quito todos los botones y en ves de ser botones los convierto en imagen, no habrá un evento onclick y se ejecuten las funciones sin refrescar? al final dejaría un sólo botón que guarde todos los "text" en la base de datos, bueno es dificil que alguien no tenga ratón... Commented el 29 dic. 2019 a las 15:42
  • Otra solución sería indicar un issuse o empty a un "text" escondido dejaría que se refresque y vuelvo a llenar los valores, pero cómo hago eso? Commented el 29 dic. 2019 a las 15:51

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.