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>