comment valider la taille du fichier à l'aide de HTML et de Javascript côté client

Comment puis-je valider la taille du fichier sur le côté client à l'aide de JavaScript? Je suis à l'aide de type=file pour sélectionner le fichier

OriginalL'auteur NewDev | 2009-12-02

  1. 13

    Mise à JOUR 2013
    à compter de cette modification, le Fichier API est prise en charge dans tous les principaux navigateurs, et dans IE à partir de la version 10

    http://caniuse.com/#search=file%20api

    Vous souhaitez peut-être utiliser SWFUpload si vous avez encore besoin de soutien IE9 et de la vertu, mais à ce point il devrait probablement être plus une de secours, depuis le html5 fichier api a une prise en charge sur les plates-formes mobiles où SWFUpload ne peut pas atteindre. Le html5 fichier api est basé sur firefox fichier api comme indiqué ci-dessous.

    Voir aussi cette double question
    Client de Vérifier la taille du fichier à l'aide de HTML5?

    Mise à JOUR: Firefox a changé leur API pour cette https://developer.mozilla.org/en/DOM/FileReader

    Vous pouvez le faire dans firefox comme

    html:

    <form action="" method="get" accept-charset="utf-8">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue &rarr;"></p>
</form>

    javascript:

    var filesize = document.forms[0].file.files[0].fileSize

    si il y a un moyen de le faire dans IE, je ne sais pas. Il implique sans doute activeX ou certains autres de telles âneries.

    edit:
    J'ai trouvé ce ici, COMMENT FAIRE DANS IE

    <head>
<script>
function getSize()
{
 var myFSO = new ActiveXObject("Scripting.FileSystemObject");
 var filepath = document.upload.file.value;
 var thefile = myFSO.getFile(filepath);
 var size = thefile.size;
 alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
    +1 je ne savais pas qu' - supprimé mon post.
    +1 Alors que c'est une bonne approche (à l'aide de Javascript, la question d'origine était à propos de), vous êtes vraiment juste une solution pour les deux navigateurs. Bien sûr, ce sont les deux navigateurs les plus populaires, mais si vous avez besoin de plusieurs navigateur/plate-forme de soutien, il pourrait se révéler très difficile à mettre en œuvre.
    Javascript ne peut pas être un remplacement pour le contrôle de la taille du fichier sur le serveur. Si le but est simplement de faire quelques économies, alors que l'objectif est possible, je pense.
    Je suis entièrement d'accord Breton, vous devriez toujours vérifier le fichier serverside si vous voulez VRAIMENT être sûr. Qui pourrait comprendre, par exemple, la vérification des dimensions d'une image téléchargée, ou l'empêcher de gifs animés à télécharger (ou au moins sauvé). Lorsque vous traitez avec du code côté client comme Javascript, le client ne peut jamais être à 100% de confiance.
    Cette réponse nécessite beaucoup de mises en garde d'être utile en général. 1) c'est à dire les besoins du site pour être inséré dans les "Sites de Confiance" de la liste pour que cela pas d'erreur. Si vous allez faire un copier/coller des trucs à une autre page, faire un peu de recherche en premier 2) ce ne fut introduite dans FF3 3) et fileSize a déjà été déprécié (developer.mozilla.org/en/DOM/File)

    OriginalL'auteur Breton

  2. 5

    Peut-être que vous pourriez utiliser SWFUpload au lieu de cela, qui est une petite application Flash qui gère le côté client de la télécharger pour vous. À partir de leur liste de fonctionnalités:

    • Télécharger plusieurs fichiers à la fois par ctrl/maj-sélection dans la boîte de dialogue
    • Javascript rappels sur tous les événements
    • Obtenir des informations sur le fichier avant de le télécharger commence
    • Style de télécharger des éléments avec XHTML et css
    • Affichage de l'information tandis que les fichiers à télécharger à l'aide de HTML
    • Pas de page de recharge nécessaire
    • Fonctionne sur toutes les plateformes/navigateurs qui a le support de Flash.
    • Dégrade gracieusement à la normale HTML formulaire d'upload si le Flash ou le javascript n'est pas disponible
    • Contrôle de la taille des fichiers avant de les télécharger commence
    • Afficher seulement choisi les types de fichiers dans la boîte de dialogue
    • File d'attente de téléchargement, de retirer ou d'ajouter des fichiers avant de commencer à télécharger

    OriginalL'auteur Sune Rievers

  3. 2

    Je tiens à combiner les deux façons de vérifier la taille du fichier sur le côté client à l'aide de javascript. Je l'ai testé sur FF/IE/Chrome et ça fonctionne très bien:

     <script type="text/javascript">
    function checkBrowser()
    {
         if(navigator.appName == "WebTV")
        {
         alert("You're using the WebTV browser.")
        }
         if(navigator.appName == "Netscape")
        {
         checkFileSizeFF();
        }
         if(navigator.appName == "Microsoft Internet Explorer")
        {
         checkFileSizeIE();
        }
    }
    function checkFileSizeFF()
    {
        var filesize = document.forms[0].file.files[0].fileSize;
        alert(filesize/(1024*1024)  + " MB");
    }
    function checkFileSizeIE()
    {
     var myFSO = new ActiveXObject("Scripting.FileSystemObject");
     var filepath = document.upload.file.value;
     var thefile = myFSO.getFile(filepath);
     var size = thefile.size/(1024*1024);
     alert(size + "MB");
    }
    </script>

    <form action="" method="get" accept-charset="utf-8" name="upload">
    <input type="file" name="file" value="" id="file">
    <p><input type="submit" value="Continue &rarr;" onclick="checkBrowser()"></p>
    </form>


    <div id="example"></div>

    OriginalL'auteur Umer Khalid Butt