limitar el tamaño de un archivo de carga (entrada html)

Question

me gustaría simplemente limitar el tamaño de un archivo que un usuario puede subir.

Pensé maxlength = 20000 = 20k pero eso no parece funcionar en absoluto.

Estoy móviles sobre raíles, no PHP, pero estaba pensando que sería mucho más simple de hacerlo del lado del cliente en el HTML/CSS, o como último recurso usando jQuery. Aunque esto es tan básico que debe haber alguna etiqueta HTML que me falta o que no conozco.

Buscando apoyar IE7 +, Chrome, FF3.6 +. Supongo que podría salirme con solo soportar IE8 + si es necesario.

Gracias.

Answer 1

No puede hacerlo del lado del cliente. Tendrás que hacerlo en el servidor.

Editar: Esta respuesta no está actualizada.

Como el tiempo de esta edición, el archivo HTML API es mostly supported on all major browsers.

Proporcionaría una actualización con solución, pero @ mark.inman.winning already did it.

Tenga en cuenta que incluso si ahora es posible validar en el cliente, aún así debe validarlo en el servidor. Todas las validaciones del lado del cliente pueden pasarse por alto.

Answer 2

Esto es completamente posible. Use Javascript.

Uso jQuery para seleccionar el elemento de entrada. Lo tengo configurado con un evento de cambio.

$("#aFile_upload").on("change", function (e) { 

    var count=1; 
    var files = e.currentTarget.files; // puts all files into an array 

    // call them as such; files[0].size will get you the file size of the 0th file 
    for (var x in files) { 

     var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB 

     if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) { 

      if (count > 1) { 

       approvedHTML += ", "+files[x].name; 
      } 
      else { 

       approvedHTML += files[x].name; 
      } 

      count++; 
     } 
    } 
    $("#approvedFiles").val(approvedHTML); 

}); 

El código anterior guarda todos los nombres de archivo que me parecen dignos de persistir a la página de presentación, antes de la presentar efectivamente sucede. Agregué los archivos "aprobados" a val de un elemento de entrada utilizando jQuery, por lo que un formulario enviado enviará los nombres de los archivos que deseo guardar. Todos los archivos serán enviados, sin embargo, ahora en el lado del servidor, tenemos que filtrarlos. Aún no he escrito ningún código para eso, pero usa tu imaginación. Supongo que uno puede lograr esto mediante un bucle for y haciendo coincidir los nombres enviados desde el campo de entrada y hacerlos coincidir con la variable $ _FILES (PHP Superglobal, lo siento, no conozco la variable de archivo ruby).

Mi punto es que se puede hacer controles para los archivos antes de su presentación. Hago esto y luego lo entrego al usuario antes de que él/ella envíe el formulario, para que ellos sepan lo que están cargando en mi sitio. Todo lo que no cumple con los criterios no se muestra al usuario y, por lo tanto, deben saber que los archivos que son demasiado grandes no se guardarán. Esto debería funcionar en todos los navegadores porque no estoy usando el objeto FormData.