¿Como Validar tamaño de archivo?

[neglivv]

Hola Amig@s de foros del web!!! Quisiera saber si me pueden ayudar con lo siguiente: tengo un formulario en donde pido datos personales y pido que la persona adjunte una serie de documentos (puede ser jpg o pdf).
Ya he validado que los documentos sean de un tipo en especifico, pero he buscado y buscado y encontre que No hay forma de validar el tamaño del documento o imagen con javascript.
Sé que debo usar ajax, pero como soy tan novata con eso, recurro a ustedes para que me ayuden please, ya que me queda poco tiempo para hacer este sistemita
Lo que tengo hasta ahora es esto:

Código HTML:

 <script type="text/javascript">
		$("#partida").change(function()
		{
			$(".required9").hide();
			if (!validar_archivo("partida","jpg",3))
				$(".error_par").show();
			else
				$(".error_par").hide();
		});
	});
	</script>
...

<form id="form1" name="form1" action="prueba.php" enctype="multipart/form-data" method="post" onsubmit="return validar();">
... Aqui pido datos personales...
<input class="required" id="partida" name="adjuntos[]" type="file">
<div class="errores error_par" style="display:none;">El tipo de archivo debe pdf y <br>no pesar mas de 3MB.</div>
</form> 

la funcion validar_archivo es asi:

Código HTML:

function validar_archivo(elem,tipo,tamanio)
{
		var archivo=document.getElementById(elem).value;
		var extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
		//Primero validamos la extension
		if (extension!="."+tipo)
		{
			return false;
		}
		else
		{
			//Ahora validamos el tamanio del archivo
			/*no se que hacer =(*/
			
		}
		return true;
}

se que la solucion esta en el uso de ajax para validar en un php, pero no tengo ni idea de como enviar el archivo para ser procesado en el php (se como procesarlo en el php)
Les agradezco de antemano cualquier ayudita que me puedan dar

[maycolalvarez]

javascript no tiene acceso al IO, solo puedes controlar eso en el servidor

[neglivv]

Gracias por tu respuesta maycolalvarez, créeme que de eso me di cuenta buscando en el foro.
Estuve TODO el santo dia buscando por aqui y por alla, pongo aca la solucion que le encontrado hasta ahora: y lo probé en todos los navegadores y funciona

Código HTML:

//partida es el id del input
		$("#partida").change(function()
		{
			$(".required9").hide();
			if (!validar_archivo(this,"jpg"))
				$(".error_par").show();
			else
				$(".error_par").hide();
		});
// la función validar_archivo ahora me quedo asi:

function validar_archivo(elem,tipo,tamanio)
{
		var archivo=document.getElementById(elem.id).value;
		var extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
		//Primero validamos la extension
		if (extension!="."+tipo)
		{
			return false;
		}
		else	//Ni me preocupo por validar el tamaño si no es el tipo correcto
		{
			checkear(elem);
			
		}
		return true;
}

//y checkear es esto:
function checkear(f)	{
					actionActual = f.form.action;
					targetActual = f.form.target;
					f.form.action = "includes/validar_archivo.php";
					f.form.target = "ver";
					f.form.submit();
					f.form.action = actionActual;
					f.form.target = targetActual;
			}
... El formulario es mas o menos así:
<form id="form1" name="form1" action="includes/validar_archivo.php" enctype="multipart/form-data" method="post" onsubmit="return validar();">
<input class="required" id="partida" name="adjuntos[]" type="file" target="uploadedImage">
<div class="errores error_par" style="display:none;">El tipo de archivo debe pdf y <br>no pesar mas de 3MB.</div>
</form>
... Debajo del formulario coloque esto: 

<iframe id="ver" name="ver" style="display: block; margin: auto; border-width: 2px; width: 484px; height: 364px;"></iframe> 

En el php valido el tamaño del archivo.
Ahora mi duda es la siguiente: ¿Como hago para que en vez de desplegarse el error en el <iframe> aparezca el <div> error_par?

[livemusic]

Hola, xq no usas mejor un script, estos son algunos que te pueden, ayudar .... y sobre todo son muy faciles de configurar ...

Ajax Upload

----------> opcion ==> allowedExtensions: [], // Determina el formato del archivo
-------------------------> sizeLimit: // Tamaño del archivo



uploadify

----------> opcion ==> fileExt // Determina el formato del archivo
-------------------------> sizeLimit: // Tamaño del archivo

Si justas te puedo ayudar ... Aunque recuerdo que publicaste un post de uploadify ... supongo y no te resulto .. hahaha ....

No ay problema usa el Ajax Upload, en lo personal este te permite jugar mas con el archivo... Tengo un demo online, contactate conmigo para darte los accesos al sistemita...

Espero haberte ayudado, suerte saludos ...

[maycolalvarez]

@livemusic tales plugins requieren de adobe flash(R)

[livemusic]

maycolalvarez, estas seguro de lo dices? mmm .. te invito a que descargues Ajax Upload y espero y encuentres un archivo flash ... .

Por otro lado neglivv, para tu solucion, usa JSON establece una comunicacion entre JS y PHP ... que te permitira manipular la respuesta de PHP a JS --> jQuery.getJSON()

Aunque lo que andas haciendo es reinventar la rueda .. Suerte ... ..

[neglivv]

Gracias por tu respuesta livemusic, ya lo he intentado con los dos, pero preferí hacerlo a pie (como lo estoy haciendo ahora) porque mas eran los errores que obtenía y el tiempo que me pasaba entendiéndolos y configurándolos, que lo que lograba con ellos. Y lo hice así por el inconveniente que presentaba en el otro post.

¿Alguien puede ayudarme please? Como hago para que aparezca un <div> de error debajo del input del archivo en vez de que me salga el error en el <iframe>???
hay alguna forma de que la función checkear que coloque arriba retorne true o false??
De antemano gracias!

[livemusic]

hahaah a reinventar la rueda entonces .... ...

Como te comente usar el jQuery.getJSON() io lo uso para obtener respuestas, al servidor pero bien te puede servir ... aqui el ejemplo ..

Archivo : json.html

Código HTML:

<!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>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#btn_sumar").live('click', function(){
        var num1 = $('#txt_sumar1').val();
        var num2 = $('#txt_sumar2').val();
        
        $.getJSON('sumar.php',{num1:num1, num2:num2}, function(data) {
            // obtengo la respuesta de PHP y me permite jugar con el resultado ==> data.sumar 
            $("#respuesta").html(data.sumar);
        });
        
    })
})
</script>
</head>
<body>
<input type="text" name="txt_sumar1" id="txt_sumar1" /> + <input type="text" name="txt_sumar2" id="txt_sumar2" />
<input type="button" id="btn_sumar" value="sumar" />
<div id="respuesta"></div>
</body>
</html>
 

Archivo : sumar.php

Código PHP:

<?php
    $num1 = $_REQUEST['num1'];
    $num2 = $_REQUEST['num2'];  
    $sumar = array("sumar" => $num1 + $num2);
    echo json_encode($sumar);
?>
 

a Estudiar el codigo xD ... getJSON = por lo que entiendo de getJson, se pueden enviar valores, y este te contesta, permitiendote manipular el objeto.. xD ... espero haberme dado entender ... ..

En tu caso envia tu archivo... x getJson y obten la respuesta ... asi te dejara manipularla en un div en lo que gustes....

Suerte saludos........

[maycolalvarez]

Iniciado por livemusic

maycolalvarez, estas seguro de lo dices? mmm .. te invito a que descargues Ajax Upload y espero y encuentres un archivo flash ... .

Por otro lado neglivv, para tu solucion, usa JSON establece una comunicacion entre JS y PHP ... que te permitira manipular la respuesta de PHP a JS --> jQuery.getJSON()

Aunque lo que andas haciendo es reinventar la rueda .. Suerte ... ..

en tal caso utiliza HTML5 File API la cual no es soportada por todos los navegadores, aclarado el dato

[livemusic]

Iniciado por maycolalvarez

en tal caso utiliza HTML5 File API la cual no es soportada por todos los navegadores, aclarado el dato

No veo... HTML5 File API -- > en Ajax Upload , pero bueno el objetivo es, No reinventar la rueda .

[neglivv]

ok, intentare de nuevo con Ajax Upload, y tambien con lo de getJSON(). Cualquier cosa les aviso mil gracias por sus respuestas!!!

[neglivv]

Hola de nuevo! encontré este plugin que es algo sencillo (para no reinventar la rueda, jeje) y he podido adaptarlo un poco para lo que quiero hacer (ademas funciona en todos los navegadores):
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

El problema es que el mensaje que despliega con los resultados es un alert, y cuando lo cambio a un div, se borra lo que esta en el input file que estoy validando
¿Alquien ha utilizado este plugin y puede ayudarme con esto please?

Código HTML:

function ajaxFileUpload(num)
	{
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});

		$.ajaxFileUpload
		(
			{
				url:'doajaxfileupload.php',
				secureuri:false,
				fileElementId:'fileToUpload'+num, //Los id de los input que valido son fileToUpload1,..., fileToUploadn
				dataType: 'json',
				data:{name:'logan', id:'id'},
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							$("#final").html(data.msg); //Aqui escribo el mensaje
						//alert(data.msg);
						}
					}
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		
		return false;

	}

[neglivv]

Hola a todos! revivo este tema porque encontré la solución modificando el plugin que encontré en:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

y acá coloco las modificaciones que le hice para quien las necesite o simplemente quiera probar:
http://www.4shared.com/file/D1fjO6CC...validar_.html?

Espero que esto sirva de ayuda a alguien, lo probé y sirve en chrome, firefox e IE (hasta ahora no me ha dado problema)

[livemusic]

Me da gusto que te allá podido salir, se ve que aprendiste a usar bien el Json felicitaciones ....

[jpuigvertseros]

Hola que tal neglivv y a todos, he intentado utilizar el el plugin modificado por ti en http://www.4shared.com/file/D1fjO6CC...validar_.html?, para cargar archivos y validar su tamaño y formato y me funciona, pero como no tengo ni idea de como funciona el Ajax no se donde me guarda los archivos en el servidor (o donde indica donde guardarlos)!!!!
Podrías ayudarme?
Muchas gracias

[maycolalvarez]

Iniciado por jpuigvertseros

Hola que tal neglivv y a todos, he intentado utilizar el el plugin modificado por ti en http://www.4shared.com/file/D1fjO6CC...validar_.html?, para cargar archivos y validar su tamaño y formato y me funciona, pero como no tengo ni idea de como funciona el Ajax no se donde me guarda los archivos en el servidor (o donde indica donde guardarlos)!!!!
Podrías ayudarme?
Muchas gracias

si no se ha dado cuenta, el tema es del AÑO pasado, favor no revivir temas muertos, consulte las Políticas del Foro, hubiese sido preferible abrir un tema propio y colocar el link a éste.

Aclarando las dudas:

AJAX como Javascript NO tiene acceso al IO, por lo tanto NO puede leer el tamaño del archivo

Lo máximo que se puede obtener, como lo hizo al principio @neglivv es tener la extensión.

Los otros plugins proporcionados por @livemusic o usan flash o HTML5 File API, tendría que documentarse al respecto sobre cual alternativa usar y tener en cuenta que el navegador sea compatible con HTML5 FileAPI, no todos lo implementan aún.

si no conoce AJAX: documéntese, como todos lo hemos tenido que hacer
http://librosweb.es/ajax/index.html

[jpuigvertseros]

Hola maycolalvarez.com gracias por las aclaraciones en cuanto a revivir un tema obsoleto, i el link al libro de AJAX que pinta muy bien, tambien me querria decir que pregunto precisamente por que no conozco, o no se (no sabía) por donde empezar con un tema como el de AJAX
Muchas gracias por todo