Comment vérifier la taille d'entrée du fichier avec jQuery?

En réalité, vous n'avez pas accès au système de fichiers (par exemple, la lecture et l'écriture de fichiers locaux), en raison de la spécification HTML5 File Api, il existe des propriétés de fichier auxquelles vous avez accès et la taille du fichier est l'une d'entre elles.

Pour le HTML ci-dessous

<input type="file" id="myFile" /> 

Essayez ce qui suit:

 //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); }); 

Comme il fait partie de la spécification HTML5, cela ne fonctionnera que pour les navigateurs modernes (v10 requis pour IE) et j'ai ajouté ici plus de détails et des liens sur les autres informations de fichier que vous devriez connaître: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-checking-the-file-size /

Les anciens navigateurs prennent en charge

this.files que les anciens navigateurs this.files une valeur null pour l'appel this.files précédent, afin d'accéder à this.files[0] augmentera une exception et vous devriez vérifier l'aide de l'API de fichier avant de l'utiliser

Si vous souhaitez utiliser jQuery's validate vous pouvez en créant cette méthode:

 $.validator.addMethod('filesize', function(value, element, param) { // param = size (en bytes) // element = element to validate (<input>) // value = value of the element (file name) return this.optional(element) || (element.files[0].size <= param) }); 

Vous l'utiliserez:

 $('#formid').validate({ rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } }); 

DdddddddélMMM HébergementTemetteMachinetteMachélMachéMachea

 $("#yourFileInput")[0].files[0].size; 

Renvoie la taille du fichier pour une entrée de formulaire.

Sur FF 3.6 et plus tard, ce code devrait être:

 $("#yourFileInput")[0].files[0].fileSize; 

Je publie également ma solution, utilisé pour un contrôle ASP.NET FileUpload . Peut-être que quelqu'un le trouvera utile.

  $(function () { $('<%= fileUploadCV.ClientID %>').change(function () { //because this is single file upload I use only first index var f = this.files[0] //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes) if (f.size > 8388608 || f.fileSize > 8388608) { //show an alert to the user alert("Allowed file size exceeded. (Max. 8 MB)") //reset file upload control this.value = null; } }) }); 

Vous pouvez effectuer ce type de vérification avec Flash ou Silverlight mais pas avec Javascript. Le sandbox javascript n'autorise pas l'accès au système de fichiers. La vérification de la taille devrait être effectuée côté serveur après sa mise en ligne.

Si vous souhaitez passer la route Silverlight / Flash, vous pouvez vérifier que si elles ne sont pas installées par défaut pour un gestionnaire de téléchargement de fichiers régulier qui utilise les contrôles normaux. De cette façon, si Silverlight / Flash a installé, son expérience sera un peu plus riche.

J'avais besoin d'une solution pour faire fonctionner les navigateurs. Pour les navigateurs modernes, j'ai utilisé la solution HTML 5 suggérée ci-dessus. Réduire le fait que lorsque la taille de la demande est supérieure à un certain seuil, vous commencez à obtenir 404 Non trouvé sur Ajax POST. J'ai utilisé le rappel d'erreur sur Ajax Post pour avertir l'utilisateur des restrictions de taille de fichier.

 <form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"> </form> <button onclick="checkSize();"></button> <script> function checkSize(){ var size = $('#uploadForm')["0"].firstChild.files["0"].size; console.log(size); } </script> 

J'ai trouvé que cela était le plus simple si vous ne planifiez pas de soumettre le formulaire à l'aide de méthodes standard ajax / html5, mais bien sûr, cela fonctionne avec n'importe quoi.

REMARQUES:

 var size = $('#uploadForm')["0"]["0"].files["0"].size; 

Cela a l'habitude de travailler, mais il ne fonctionne plus en Chrome, je viens de tester le code ci-dessus et il a fonctionné à la fois sur ff et chrome (dernier). La seconde ["0"] est maintenant FirstChild.

DdddMMMMMMMMMMMMMMMMMMMMMMMMM

Mais vous pouvez utiliser Flash pour télécharger le fichier, et Flash sait à quel point le fichier est important .

Mais il y a une demande de fonctionnalité chez JQUpload que vous voudrez peut-être consulter.