Tamaño de archivos
Tengo un pequeño inconveniente para subir archivos mediante mi página web, ya que es necesario poner un límite al tamaño del mismo, esto lo controlo ahora con PHP.
Mi pregunta es, existe una forma de conocer el tamaño del archivo con JavaScript antes de hacer un SUBMIT a la página del servidor.
Algo a manera de Ajax o alguna idea.
Mi pregunta es, existe una forma de conocer el tamaño del archivo con JavaScript antes de hacer un SUBMIT a la página del servidor.
Algo a manera de Ajax o alguna idea.
1 respuesta
Respuesta de crcbad
1
Pues sí que hay una forma en Javascript para saber el tamaño de un fichero, ahora bien, para ello, tenemos que cargarlo primero en el documento, para que podamos averiguarlo.
Inicialmente, tendremos en el body, lo siguiente:
<form name="form1" method="post" action="">
<input name="file" type="file" id="fichero">
<input name="Submit" type="button" onClick="prueba()" value="Enviar">
</form>
Como adivinarás, el primero es para seleccionar el fichero en cuestión, y el segundo será posteriormente como enviemos el formulario. La peculiaridad del input type file, es que al seleccionar un fichero, este control te devuelve la ruta a dicho ficheor en tu PC, y como tal, puedes usarla para crear dinámicamente esa foto en el documento, aunque no se vea, y de este modo saber su tamaño, en la función de Enviar ponemos lo siguiente:
function prueba()
{
img = document.createElement("IMG");
img.src = document.getElementById("fichero").value;
img.id = "fotoFinal";
img.style.visibility = "hidden";
document.body.appendChild(img);
setTimeout("alert(Math.round((document.getElementById('fotoFinal').fileSize / 1024)*Math.pow(10,2)) / Math.pow(10,2)); ",500);
}
Lo que hacemos es crear un elemento dinámicamente del tipo imagen (IMG) en el documento, y asociar su propiedad src al de la ruta devuelta por nuestro botón de selección de fichero, y le agregamos un ID para identificarlo, y posteriormente agregamos dicha imagen con appendChild al body del documento.
Desde ese momento la foto existe, pero no al instance, ya que el navegador tarda unos pocos milisegundos en buscarla, ubicarla y cargarla en el documento, de ahí que ponga un timeout para retardar la ejecución de la siguiente orden de Javascript.
La última línea es un timeout que lleva un alert con el tamaño del fichero en cuestión, que nos lo devuelven en bytes, de ahí que lo dividamos por 1024, para obtener su tamaño en Kilobytes. Las expresiones Math. Pow(10,2) es para poder redondear con la expresión Math. Floor a dos decimales por la derecha del resultado devuelto de dividir por 1024 el tamaño del fichero devuelto.
Así podemos averiguar el tamaño, al menos de cualquier imagen, ya que se pueden agregar al body, con otros ficheros no lo he probado aun.
Inicialmente, tendremos en el body, lo siguiente:
<form name="form1" method="post" action="">
<input name="file" type="file" id="fichero">
<input name="Submit" type="button" onClick="prueba()" value="Enviar">
</form>
Como adivinarás, el primero es para seleccionar el fichero en cuestión, y el segundo será posteriormente como enviemos el formulario. La peculiaridad del input type file, es que al seleccionar un fichero, este control te devuelve la ruta a dicho ficheor en tu PC, y como tal, puedes usarla para crear dinámicamente esa foto en el documento, aunque no se vea, y de este modo saber su tamaño, en la función de Enviar ponemos lo siguiente:
function prueba()
{
img = document.createElement("IMG");
img.src = document.getElementById("fichero").value;
img.id = "fotoFinal";
img.style.visibility = "hidden";
document.body.appendChild(img);
setTimeout("alert(Math.round((document.getElementById('fotoFinal').fileSize / 1024)*Math.pow(10,2)) / Math.pow(10,2)); ",500);
}
Lo que hacemos es crear un elemento dinámicamente del tipo imagen (IMG) en el documento, y asociar su propiedad src al de la ruta devuelta por nuestro botón de selección de fichero, y le agregamos un ID para identificarlo, y posteriormente agregamos dicha imagen con appendChild al body del documento.
Desde ese momento la foto existe, pero no al instance, ya que el navegador tarda unos pocos milisegundos en buscarla, ubicarla y cargarla en el documento, de ahí que ponga un timeout para retardar la ejecución de la siguiente orden de Javascript.
La última línea es un timeout que lleva un alert con el tamaño del fichero en cuestión, que nos lo devuelven en bytes, de ahí que lo dividamos por 1024, para obtener su tamaño en Kilobytes. Las expresiones Math. Pow(10,2) es para poder redondear con la expresión Math. Floor a dos decimales por la derecha del resultado devuelto de dividir por 1024 el tamaño del fichero devuelto.
Así podemos averiguar el tamaño, al menos de cualquier imagen, ya que se pueden agregar al body, con otros ficheros no lo he probado aun.
