Limiter la taille d'un fichier téléchargé (élément d'entrée html)

Question

Je voudrais simplement limiter la taille d'un fichier qu'un utilisateur peut télécharger.

Je pensais que maxlength = 20000 = 20k mais cela ne semble pas fonctionner du tout.

Je fonctionne avec Rails, pas avec PHP, mais je pensais qu'il serait beaucoup plus simple de le faire côté client dans le HTML/CSS, ou en dernier recours en utilisant jQuery. C'est tellement basique qu'il doit y avoir une balise HTML que j'ai oubliée ou que je ne connais pas.

Je cherche à supporter IE7+, Chrome, FF3.6+. Je suppose que je pourrais me contenter de supporter IE8+ si nécessaire.

Merci.

Answer 1

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

Cet exemple devrait fonctionner correctement. Je l'ai configuré pour environ 2MB, 1MB en octets est 1,048,576 donc vous pouvez le multiplier par la limite dont vous avez besoin.

Voici l'exemple de jsfiddle pour plus de clarté :
https://jsfiddle.net/7bjfr/808/

Answer 2

C'est tout à fait possible. Utilisez Javascript.

J'utilise jQuery pour sélectionner l'élément de saisie. Je l'ai configuré avec un onChange événement.

$("#aFile_upload").on("change", function (e) {

    var count=1;
    var files = e.currentTarget.files; // puts all files into an array

    // call them as such; files[0].size will get you the file size of the 0th file
    for (var x in files) {

        var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB

        if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) { 

            if (count > 1) {

                approvedHTML += ", "+files[x].name;
            }
            else {

                approvedHTML += files[x].name;
            }

            count++;
        }
    }
    $("#approvedFiles").val(approvedHTML);

});

Le code ci-dessus enregistre tous les noms de fichiers que je juge dignes de persister dans la page de soumission avant que la soumission n'ait lieu. J'ajoute les fichiers "approuvés" à la valeur d'un élément d'entrée à l'aide de jQuery, de sorte qu'une soumission de formulaire envoie les noms des fichiers que je veux sauvegarder. Tous les fichiers seront soumis, mais nous devons maintenant les filtrer côté serveur. Je n'ai pas encore écrit de code pour cela, mais laissez libre cours à votre imagination. Je suppose qu'il est possible d'y parvenir en utilisant une boucle for et en faisant correspondre les noms envoyés par le champ de saisie à la balise $_FILES (PHP Superglobal, désolé je ne connais pas les variables de fichiers ruby) variable.

Ce que je veux dire, c'est qu'il est possible de vérifier les fichiers avant de les soumettre. Je le fais et je le communique à l'utilisateur avant qu'il ne soumette le formulaire, pour lui indiquer ce qu'il télécharge sur mon site. Tout ce qui ne répond pas aux critères n'est pas affiché à l'utilisateur et il doit donc savoir que les fichiers trop volumineux ne seront pas enregistrés. Cela devrait fonctionner sur tous les navigateurs car je n'utilise pas la fonction FormData objet.

Answer 3

Vous ne pouvez pas le faire côté client. Vous devez le faire sur le serveur.

Edit : Cette réponse est obsolète !

Lorsque j'ai répondu à cette question en 2011, API pour les fichiers HTML n'était qu'un projet. Il est désormais pris en charge par tous les principaux navigateurs .

Je fournirais bien une mise à jour avec la solution, mais @mark.inman.winning a déjà répondu mieux que moi .

Gardez à l'esprit que même s'il est désormais possible de valider sur le client, vous devez néanmoins le valider sur le serveur. Toutes les validations côté client peuvent être contournées.

Answer 4

const input = document.getElementById('input')

input.addEventListener('change', (event) => {
  const target = event.target
    if (target.files && target.files[0]) {

      /*Maximum allowed size in bytes
        5MB Example
        Change first operand(multiplier) for your needs*/
      const maxAllowedSize = 5 * 1024 * 1024;
      if (target.files[0].size > maxAllowedSize) {
        // Here you can ask your users to load correct file
        target.value = ''
      }
  }
})

<input type="file" id="input" />

Si vous avez besoin de valider le type de fichier Pour cela, écrivez-moi dans les commentaires ci-dessous et je vous ferai part de ma solution.

(Spoiler : accept n'est pas une solution à toute épreuve)

Answer 5

const input = document.getElementById('input')

input.addEventListener('change', (event) => {
  const target = event.target
    if (target.files && target.files[0]) {

      /*Maximum allowed size in bytes
        5MB Example
        Change first operand(multiplier) for your needs*/
      const maxAllowedSize = 5 * 1024 * 1024;
      if (target.files[0].size > maxAllowedSize) {
        // Here you can ask your users to load correct file
        target.value = ''
      }
  }
})

<input type="file" id="input" />