Comment vérifier la taille d'entrée des fichiers avec jQuery?
j'ai un formulaire avec des capacités de téléchargement de fichiers et je voudrais être en mesure d'avoir un bon rapport d'erreur côté client si le fichier que l'utilisateur essaie de télécharger est trop grand, y a-t-il un moyen de vérifier la taille du fichier avec jQuery, soit purement sur le client ou d'une façon ou d'une autre poster le fichier de nouveau sur le serveur à vérifier?
7 réponses
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 HTML5, il y a certaines propriétés de fichiers 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, 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 savoir: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size /
les anciens navigateurs prennent en charge
soyez conscient que les vieux navigateurs retourneront une valeur null pour l'appel précédent this.files , donc l'accès à this.files[0] soulèvera un exception et vous devez vérifier la prise en charge de L'API des fichiers avant de l'utiliser
si vous voulez utiliser le 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'utiliser:
$('#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;
retourne la taille du fichier pour une entrée de formulaire.
sur FF 3.6 et postérieurement ce code doit être:
$("#yourFileInput")[0].files[0].fileSize;
je poste aussi ma solution, utilisée pour un ASP.NET FileUpload contrôle.
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 faire ce type de vérification avec Flash ou Silverlight mais pas Javascript. Le bac à sable 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 avoir été chargée.
si vous voulez passer par la route Silverlight/Flash, vous pouvez vérifier que s'ils ne sont pas installés par défaut sur un gestionnaire de téléchargement de fichier régulier qui utilise les contrôles normaux. De cette façon, si le do ont Silverlight/Flash installé leur l'expérience sera un peu plus riche.
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;
}
<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'est le plus facile si vous ne prévoyez pas soumis le formulaire par les méthodes ajax / html5 standard, mais bien sûr, il fonctionne avec n'importe quoi.
NOTES:
var size = $('#uploadForm')["0"]["0"].files["0"].size;
cela fonctionnait auparavant, mais il ne fonctionne plus en chrome, je viens de tester le code ci-dessus et il a fonctionné à la fois en ff et en chrome (lastest). Le second ["0"] est maintenant le premier enfant.