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

J'ai un formulaire avec des capacités de téléchargement de fichiers et je voudrais pouvoir avoir de bons 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 ou en quelque sorte en train de publier le fichier sur le serveur pour vérifier?

En fait, vous n'avez pas accès au système de fichiers (par exemple la lecture et l'écriture de fichiers locaux), cependant, en raison de la spécification de l'API de fichier HTML5, vous avez accès à certaines propriétés de fichier, et la taille du fichier en fait partie.

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 requis pour IE) et j'ai ajouté ici plus de détails et des liens sur d'autres informations de fichier que vous devriez connaître: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-vérification-de-la-taille-du-fichier /

Prise en charge des anciens navigateurs

Sachez que les anciens navigateurs renverront une nullvaleur pour l' this.filesappel précédent , donc l'accès this.files[0]lèvera une exception et vous devriez vérifier la prise en charge de l'API File avant de l'utiliser

Si vous souhaitez utiliser jQuery, validatevous 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'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" }
});

Ce code:

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

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

Sur FF 3.6 et versions ultérieures, ce code devrait être:

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

Je poste également ma solution, utilisée pour un FileUploadcontrôle ASP.NET . 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;
        }
    })
});

Utilisez ci-dessous pour vérifier la taille du fichier et effacer si elle est supérieure,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

Vous pouvez faire ce type de vérification avec Flash ou Silverlight mais pas Javascript. Le bac à sable javascript n'autorise pas l'accès au système de fichiers. La vérification de la taille devra être effectuée côté serveur après son téléchargement.

Si vous souhaitez suivre la route Silverlight / Flash, vous pouvez vérifier que s'ils ne sont pas installés par défaut, ils utilisent un gestionnaire de téléchargement de fichiers normal qui utilise les contrôles normaux. De cette façon, si Silverlight / Flash est installé, leur expérience sera un peu plus riche.

<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 c'était le plus simple si vous ne prévoyez pas de soumettre le formulaire via les 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 fonctionnait, mais ce n'est plus le cas dans Chrome, je viens de tester le code ci-dessus et cela a fonctionné à la fois en FF et en chrome (le dernier). Le deuxième ["0"] est maintenant firstChild.

Veuillez essayer ceci:

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}