web-dev-qa-db-fra.com

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

J'ai un formulaire avec des fonctionnalités de téléchargement de fichier et j'aimerais pouvoir générer des rapports d'erreur côté client Nice si le fichier que l'utilisateur tente de télécharger est trop volumineux. sur le client ou en quelque sorte poster le fichier sur le serveur pour vérifier?

javascriptjqueryfile-upload
123
Jimmy

En fait, vous n’avez pas accès au système de fichiers (par exemple, lire et écrire des fichiers locaux). Cependant, en raison de la spécification HTML5 File Api, 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 requise pour IE) et j'ai ajouté ici plus de détails et de liens vers d'autres informations sur les fichiers à connaître: http: // felipe .sabino.me/javascript/2012/01/30/javascipt-vérifiant-la-taille-du-fichier/

Vieux navigateurs supportés

Sachez que les anciens navigateurs renverront une valeur null pour l'appel this.files précédent. L'accès à this.files[0] déclenchera une exception et vous devrez vérifier le support de l'API de fichier avant de l'utiliser.

258
Felipe Sabino

Si vous voulez utiliser la variable validate de jQuery, vous pouvez créer 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" }
});
37
Naoise Golden

Ce code:

$("#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;
20
jeferod83

Je publie aussi ma solution, utilisée 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;
        }
    })
});
12
Besnik Kastrati

Utilisez ci-dessous pour vérifier la taille du fichier et désactivez-la si elle est plus grande,

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

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 devra être effectuée côté serveur après son téléchargement.

Si vous souhaitez utiliser la route Silverlight/Flash, vous pouvez vérifier que, s’ils ne sont pas installés, utilisez par défaut un gestionnaire de téléchargement de fichier standard utilisant les contrôles normaux. De cette façon, si Silverlight/Flash est installé, son expérience sera un peu plus riche.

1
Kelsey
<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 des méthodes ajax/html5 standard, mais bien sûr, cela fonctionne avec n'importe quoi.

REMARQUES: 

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

Cela fonctionnait auparavant, mais cela ne se fait plus en chrome, je viens de tester le code ci-dessus et cela fonctionnait à la fois en ff et en chrome (lastest). Le deuxième ["0"] est maintenant firstChild.

0
Dillon Burnett

S'il vous plaît essayez 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;
}
0
Bablu Ahmed