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

Question

J'ai un formulaire avec des capacités de téléchargement de fichiers et j'aimerais pouvoir avoir des rapports d'erreur côté client si le fichier que l'utilisateur essaie de télécharger est trop gros. Existe-t-il un moyen de vérifier la taille du fichier avec jQuery, soit purement sur le client, soit en renvoyant le fichier au serveur pour vérification ?

Answer 1

En fait, vous n'avez pas accès au système de fichiers (par exemple, pour lire et écrire des fichiers locaux). Toutefois, en raison de la spécification de l'Api fichier HTML5, vous avez accès à certaines propriétés des fichiers, dont la taille.

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, il ne fonctionnera que pour les navigateurs modernes (v10 requise pour IE) et j'ai ajouté aquí plus de détails et des liens vers d'autres informations sur les fichiers que vous devez connaître : http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

Prise en charge des anciens navigateurs

Sachez que les anciens navigateurs renvoient un null pour la valeur précédente this.files donc l'accès à this.files[0] lèvera une exception et vous devrez vérifier la prise en charge de l'API fichier avant de l'utiliser

Answer 2

Si vous souhaitez utiliser l'outil jQuery validate vous pouvez le faire 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'utiliseriez :

$('#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" }
});

Answer 3

Ce code :

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

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

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

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

Answer 4

Vous devrez renvoyer le fichier sur le serveur. Pour des raisons de sécurité, jQuery (Javascript) n'a pas accès à votre système de fichiers.

Si vous pouvez utiliser Java ou Flash dans le navigateur, vous pouvez vérifier de cette façon.

Answer 5

Vous pouvez effectuer ce type de vérification avec Flash ou Silverlight mais pas avec Javascript. La sandbox javascript ne permet pas l'accès au système de fichiers. La vérification de la taille doit être effectuée côté serveur après le téléchargement.

Si vous voulez emprunter la voie de Silverlight/Flash, vous pouvez vérifier que, s'ils ne sont pas installés, un gestionnaire de téléchargement de fichiers ordinaire utilisant les contrôles normaux sera utilisé par défaut. De cette façon, si Silverlight/Flash est installé, l'expérience sera un peu plus riche.