Validation de la taille du fichier téléchargé en JavaScript

Oui, il existe une nouvelle fonctionnalité du W3C qui est prise en charge par certains navigateurs modernes, l'[API de fichier][1]. Elle peut être utilisée à cette fin, et il est facile de tester si elle est prise en charge et de se rabattre (si nécessaire) sur un autre mécanisme si elle ne l'est pas.

Voici un exemple complet :

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
Show File Data

body {
    font-family: sans-serif;
}

<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>



<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>

Et [ici][2] c'est en action. Essayez-le avec une version récente de Chrome ou de Firefox.

Légèrement hors sujet, mais : Notez que la validation côté client ne se substitue pas à la validation côté serveur. La validation côté client est purement destinée à permettre de fournir une expérience utilisateur plus agréable. Par exemple, si vous n&#8217autorisez pas le téléchargement d&#8217un fichier de plus de 5 Mo, vous pouvez utiliser la validation côté client pour vérifier que le fichier choisi par l&#8217utilisateur ne fait pas plus de 5 Mo et lui envoyer un message amical si c&#8217est le cas (afin qu&#8217il ne passe pas tout son temps à télécharger pour que le résultat soit rejeté par le serveur), mais vous devez également faire respecter cette limite au niveau du serveur, car toutes les limites côté client (et autres validations) peuvent être contournées.

[1] : http://www.w3.org/TR/FileAPI/ [2] : http://jsbin.com/ulamor

NonNon Oui, en utilisant l'API Fichier dans les navigateurs les plus récents. Voir la réponse de TJ's pour plus de détails.

Si vous devez également prendre en charge des navigateurs plus anciens, vous devrez utiliser un chargeur basé sur Flash comme [SWFUpload][1] ou [Uploadify][2].

La [Démo des fonctionnalités de SWFUpload][3] montre comment fonctionne le paramètre file_size_limit.

Notez que cela nécessite (évidemment) Flash, et que la façon dont cela fonctionne est un peu différente des formulaires de téléchargement normaux.

[1] : http://www.swfupload.org [2] : http://www.uploadify.com [3] : http://demo.swfupload.org/v220/featuresdemo/index.php

Vous pouvez essayer ceci [fineuploader][1].

Il fonctionne bien sous IE6 (et plus), Chrome ou Firefox.

[1] : http://fineuploader.com/