javascript - pagina - Uso de jQuery, restricción del tamaño del archivo antes de la carga
llamar javascript desde html (8)
Como otros han dicho, no es posible con solo JavaScript debido al modelo de seguridad de los mismos.
Si puede, recomendaría una de las siguientes soluciones ... ambas usan un componente flash para las validaciones del lado del cliente; sin embargo, están conectados usando Javascript / jQuery. Ambos funcionan muy bien y se pueden usar con cualquier tecnología del lado del servidor.
En PHP, tienen una forma de restringir el tamaño del archivo DESPUÉS de cargar, pero no ANTES de cargarlo. Uso el complemento de formulario de jasue de Malsup para la publicación de mi formulario, y admite la publicación de archivos de imagen.
Me preguntaba si tal vez haya una restricción en la que pueda establecer cuántos bytes pueden pasar a través de esa transmisión AJAX hasta el servidor. Eso me podría permitir verificar el tamaño del archivo y devolver un error si el archivo es demasiado grande.
Al hacer esto en el lado del cliente, bloquea a los novatos que toman una foto de 10 MB de su Pentax e intentan subir eso.
Descubrí que Apache2 (es posible que también desee comprobar Apache 1.5) tiene una forma de restringir esto antes de subirlo y colocarlo en su archivo .htaccess:
LimitRequestBody 2097152
Esto restringe a 2 megabytes (2 * 1024 * 1024) en la carga de archivos (si hice mis cálculos de bytes correctamente).
Tenga en cuenta que cuando haga esto, el registro de errores de Apache generará esta entrada cuando exceda este límite en una publicación de formulario o solicitud de obtención:
Requested content-length of 4000107 is larger than the configured limit of 2097152
Y también mostrará este mensaje en el navegador web:
<h1>Request Entity Too Large</h1>
Entonces, si está haciendo publicaciones de formulario AJAX con algo como el complemento de formulario jQuery de Malsup, podría atrapar la respuesta H1 así y mostrar un resultado de error.
Por cierto, el número de error devuelto es 413. Entonces, podría usar una directiva en su archivo .htaccess como ...
Redirect 413 413.html
... y proporciona un resultado de error más elegante.
Esta es una copia de mis respuestas en una pregunta muy similar: ¿Cómo verificar el tamaño de entrada del archivo con jQuery?
En realidad, no tiene acceso al sistema de archivos (por ejemplo, leer y escribir archivos locales). Sin embargo, debido a la especificación HTML5 File API, existen algunas propiedades de archivo a las que tiene acceso, y el tamaño del archivo es uno de ellos.
Para este HTML:
<input type="file" id="myFile" />
intente lo siguiente:
//binds to onchange event of your input field
$(''#myFile'').bind(''change'', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
Como es parte de la especificación HTML5, solo funcionará para los navegadores modernos (se requiere v10 para IE) y agregué here más detalles y enlaces sobre otra información de archivos que debe conocer: here
Soporte de viejos navegadores
Tenga en cuenta que los navegadores antiguos devolverán un valor null para la llamada anterior this.files , por lo que acceder a this.files[0] generará una excepción y deberá verificar si admite la API de archivos antes de usarlo.
Lo probé de esta manera y obtengo los resultados en IE *, y Mozilla 3.6.16, no lo compruebo en versiones anteriores.
<img id="myImage" src="" style="display:none;"><br>
<button onclick="findSize();">Image Size</button>
<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
function findSize() {
if ( $.browser.msie ) {
var a = document.getElementById(''loadfile'').value;
$(''#myImage'').attr(''src'',a);
var imgbytes = document.getElementById(''myImage'').size;
var imgkbytes = Math.round(parseInt(imgbytes)/1024);
alert(imgkbytes+'' KB'');
}else {
var fileInput = $("#loadfile")[0];
var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
var imgkbytes = Math.round(parseInt(imgbytes)/1024);
alert(imgkbytes+'' KB'');
}
}
</script>
Agregue la biblioteca de Jquery también.
Me encontré con el mismo problema. Tienes que usar ActiveX o Flash (o Java). Lo bueno es que no tiene que ser invasivo. Tengo un método ActiveX simple que devolverá el tamaño del archivo que se va a subir.
Si usa Flash, puede incluso crear js / css sofisticados para personalizar la experiencia de carga, solo utilizando Flash (como una "película" 1x1) para acceder a sus funciones de carga de archivos.
No creo que sea posible a menos que use un flash, activex o cargador de Java.
Por razones de seguridad, ajax / javascript no puede acceder a la secuencia de archivos o a las propiedades de archivo antes o durante la carga.
No es posible verificar el tamaño, el ancho o la altura de la imagen en el lado del cliente. Necesitas tener este archivo cargado en el servidor y usar PHP para verificar toda esta información. PHP tiene funciones especiales como: getimagesize()
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=/"img/flag.jpg/" $attr alt=/"getimagesize() example/" />";
$(".jq_fileUploader").change(function () {
var fileSize = this.files[0];
var sizeInMb = fileSize.size/1024;
var sizeLimit= 1024*10;
if (sizeInMb > sizeLimit) {
}
else {
}
});