Uso de jQuery, restricción de tamaño de archivo antes de cargar

Question

En PHP, tienen una forma de restringir el tamaño del archivo DESPUÉS de cargar, pero no ANTES de cargarlo. Uso el Malsup jQuery Form Plugin para publicar mi formulario, y admite la publicación de archivos de imagen.

Me preguntaba si tal vez hay una restricción en la que puedo establecer cuántos bytes pueden pasar a través de ese flujo 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.

Answer 1

No creo que sea posible a menos que utilice un flash, activex o cargador de Java.

Por razones de seguridad, ajax/javascript no puede acceder al flujo de archivos o a las propiedades del archivo antes o durante la carga.

Answer 2

Tuve 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 utiliza Flash, puede incluso crear algunos js/css sofisticados para personalizar la experiencia de carga, solo con Flash (como una "película" 1x1) para acceder a sus funciones de carga de archivos.

Answer 3

encontré que Apache 2 (es posible que desee comprobar también Apache 1.5) tiene una forma de restringir esto antes de subir al dejar caer esto 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).

Nota al hacer esto, el registro de errores de Apache generará la entrada en caso de sobrepasar este límite en un poste forma o conseguir solicitud:

Requested content-length of 4000107 is larger than the configured limit of 2097152 

Y también mostrar este mensaje de nuevo en el navegador web :

<h1>Request Entity Too Large</h1> 

por lo tanto, si usted está haciendo AJAX mensajes del formulario con algo así como el Formulario Malsup jQuery Plugin, se podía trampa para la respuesta H1 como esto y mostrar un resultado de error.

Por cierto, el número de error devuelto es 413. Por lo tanto, se puede utilizar una directiva en su archivo .htaccess como ...

Redirect 413 413.html 

... y proporcionan un resultado de error más elegante espalda.

Answer 4

Al igual que 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.

http://www.uploadify.com/

http://swfupload.org/

Answer 5

No es posible verificar el tamaño de la imagen, anchura o altura 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\" />"; 

Answer 6

lo probé esta manera y estoy recibiendo los resultados en IE *, y Mozilla 3.6.16, ni de comprobar en las 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> 

Añade Jquery library también.

Answer 7

Esta es una copia de mis respuestas en una pregunta muy similar: How to check file input size with jQuery?

---

En realidad no tiene acceso al sistema de archivos (por ejemplo, la lectura y escritura de 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 se trata de una parte de la especificación de HTML 5, sólo funcionará para los navegadores modernos (v10 requeridos para IE) y He añadido here más detalles y enlaces sobre otros archivos de información que debe saber: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

navegadores viejos apoyan

Tenga en cuenta que los navegadores antiguos volverán un valor null para la this.files llamada anterior, por lo que el acceso a this.files[0] lanzará una excepción y que debiera check for File API support antes de usarlo

Answer 8

$(".jq_fileUploader").change(function() { 
    var fileSize = this.files[0]; 
    var sizeInMb = fileSize.size/1024; 
    var sizeLimit= 1024*10; 
    if (sizeInMb > sizeLimit) { 


    } 
    else { 


    } 
    });