Subir Imagenes

bacdavi · #1 (**permalink**) 12/03/2009, 14:59

Hola amigos!

Me gustaría saber si ustedes me pueden brindar su ayuda!

Resulta que necesito subir imagenes a mi webserver a traves de php y mysql, el query de subida y alojamiento corre todo genial, pero necesito de unas cuantas opciones que se personalizaran del lado cliente.

Necesito que al abrir la ventana para abrir los archivos que deseo subir sea mas o menos así:

Es decir que desde la ventana del navegador se puedan seleccionar unicamente los archivos tipo imagen *.jpg.

Habrá alguna manera de realizar esta acción??

De antemano Muchas Gracias por la ayuda!

Panino5001 · #2 (**permalink**) 12/03/2009, 15:20

Tanto para la barra de progreso como para la selección de tipos quizá te convenga usar flash. En concreto, net.FileReference: http://blog.unijimpe.net/upload-de-archivos-con-flash/
(En javascript podés controlar la extensión, pero no evitar que seleccionen un archivo de la ventana; tampoco podrás manejar el progreso)

bacdavi · #3 (**permalink**) 12/03/2009, 15:30

Muchas gracias Panino5001,
Soy un poco inexperto en javascript, me podrias ayudar con el control de extensión que mencionas??

Panino5001 · #4 (**permalink**) 12/03/2009, 15:35

Mirate este magnífico artículo de caricatos: http://www.maestrosdelweb.com/editor...s-de-subirlas/

bacdavi · #5 (**permalink**) 12/03/2009, 16:43

De nuevo muchas gracias Panino5001,

He encontrado una solucion bastante prometedora, pero ahora me surge un problema, tengo el siguiente codigo:

Código HTML:

<head>
<script language="javascript">
function Checkfiles()
{
var fup = document.getElementById('TXTfoto1');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "")
{
return true;
} 
else
{
alert("Upload Gif or Jpg images only");
fup.focus();
return false;
}
}
</script>

</head>
<body>
<tr><form action="test_isset.php" method="post" onsubmit="return Checkfiles();">
  <td><input type="file" name="TXTfoto1" id="TXTfoto1"></td>
  <td><input type="file" name="TXTfoto2" id="TXTfoto2"></td>
<td><input type="file" name="TXTfoto3" id="TXTfoto3"></td>
<td><input type="submit" name="Siguiente" value="Siguiente"></td>
</form></tr>
</body>

Pero solo lo puedo hacer con el TXTfoto1, y por consiguiente me hacen falta el TXTfoto2 y TXTfoto3.

Me podrian ayudar con este problemilla??

Panino5001 · #6 (**permalink**) 12/03/2009, 17:02

A ver, fijate si te sirve:

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=iso-8859-1" />
<title>test</title>
<script>
function control(f){
	var ext=['gif','jpg','jpeg','png'];
	var v=f.value.split('.').pop().toLowerCase();
	for(var i=0,n;n=ext[i];i++){
		if(n.toLowerCase()==v)
			return
	}
	var t=f.cloneNode(true);
	t.value='';
	f.parentNode.replaceChild(t,f);
	alert('extensión no válida');
	
}
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="file" onchange="control(this)" /><br />
<input type="file" name="file" onchange="control(this)" /><br />
<input type="file" name="file" onchange="control(this)" />
</form>

</body>
</html>

bacdavi · #7 (**permalink**) 12/03/2009, 17:18

Muchisimas gracias Panino5001
Te lo agradezco me ha quedado de perlas!
Karma para ti!

Panino5001 · #8 (**permalink**) 12/03/2009, 17:19

Me alegra que te haya servido ;)