29/09/2004, 11:21
| ||||
| ||||
| tamaño de un input=file Hola gente, estoy haciendo un sistemilla para que los usuarios puedan subir fotos a mi página web, hasta ahora todo bien pero quería saber si se puede validar el archivo (que sea .jpg o .gif y que no pese más que 100 kb) desde javascript, para que no me lo envíen al servidor al dope, ya que en el script de mi servidor hago estas verificaciones. Saludos
__________________ Esteban Quintana |
|
29/09/2004, 11:40
| ||||
| ||||
| Hola monoswim  Pues.... con javascript puedes validar el tipo de archivo.... `pero el tamaño, yo diría que no se puede obtener su peso en bytes (yo diría, pero igual y se puede y no me he enterado). Bueno con activex parece que se puede, pero sólo funcionará con explorer 4+, u no funciona en mac, así que tal vez sea arriesgarse mucho Tal vez te pudiera servir el saber sus dimensiones? como orientación, al menos....  |
|
29/09/2004, 12:45
| ||||
| ||||
| ya me imaginaba que con javascript el peso no se podía sacar...activex me suena a microsoft, así que ni loco, tiene que andar en todos los navegadores... Bueno, como hago para conseguir el ancho, el alto y la extensión de la imagen, en si la extensión la tengo pero como hago para verificarlo, yo lo haría en expresioner regulares, pero nunca vi una en javascript...me podrías poner una de jemplo así veo como van, porque una vuelta me digiste que son parecidas a las de PERL. Bueno, muchas gracias !!!
__________________ Esteban Quintana |
|
29/09/2004, 14:44
| ||||
| ||||
| Bueno, las expresiones regulares que usa js están basadas en la implementación de perl, así que no tendrás problema. Mira a ver si este ejemplo te sirve de orientación
Código:
para poder ver las imágenes mientras juegas un rato con el tema y ves qué pasa quita la línea de los estilos css de visibility: hidden. Básicamente se trata de insertar la imagen en el documento para pedirle al navegador que nos dé sus dimensiones.<script type="text/javascript">
var pat = /[gif]$|[jpg]$|[jpeg]$/
function verifica(donde){
alert(pat.test(donde.toLowerCase()))
if(pat.test(donde.toLowerCase())){
imagen = document.createElement('img')
imagen.src = donde
imagen.id = 'pruebaimagen'
if(document.getElementById('pruebaimagen')!=null){
document.getElementById('imagencilla').replaceChild(imagen,document.getElementById('pruebaimagen'))
}
else{
document.getElementById('imagencilla').appendChild(imagen)
}
alert('Ancho imagen: ' + imagen.width + "; alto imagen: " + imagen.height)
}
}
</script>
<style type="text/css">
#imagencilla{
/*visibility: hidden;*/
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<form name="form1" id="form1" enctype="multipart/form-data" method="post" action="">
<input type="file" name="file" onchange="verifica(this.value)" />
</form>
<div id="imagencilla"></div>
</body>
La idea, supongo, es que no se vea la imagen, sólo obtener sus dimensiones. Si la imagen es muy grande, aunque no se vea, te sacará la barra de scroll si se sale de la ventana, por eso la metemos dentro de un div oculto de dimensiones fijas y posición absoluta y con un overflow: hidden para que la imagen quede por dentro de la capa y no saque las barras de scroll al navegador. Esto es transparente al usuario que no vé ná pero así obtienes al menos las dimensiones de la imagen  obviamente... hay otras formas de hacer lo mismo. Esta es una como otra cualquiera (tal vez no la mejor, pero sí la que me apetecía  )Ah, y es multi-navegador, usa el dom y debería funcionar correcto en cualquier navegador a partir de versiones 5 (anteriores, se fastidien y actualicen a un navegador más nuevo) |
