Question Limiter la taille d'un fichier téléchargé (entrée HTML)


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 cours sur Rails, pas sur PHP, mais je pensais qu'il serait beaucoup plus simple de le faire côté client dans HTML / CSS, ou en dernier recours avec jQuery. C'est tellement fondamental qu'il doit y avoir une balise HTML qui me manque ou dont je ne suis pas au courant.

Vous cherchez à supporter IE7 +, Chrome, FF3.6 +. Je suppose que je pourrais m'en tirer avec juste le support de IE8 + si nécessaire.

Merci.


33
2018-04-18 01:09


origine


Réponses:


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

Edit: Cette réponse est obsolète! 

Au moment de cette modification, l’API de fichier HTML est principalement pris en charge sur tous les principaux navigateurs.

Je fournirais une mise à jour avec la solution, mais @ mark.inman.winning déjà fait.

N'oubliez pas que même s'il est maintenant possible de valider sur le client, vous devez toujours le valider sur le serveur. Toutes les validations côté client peuvent être ignorées.


17
2018-04-18 01:10



Ceci est tout à fait possible. Utilisez Javascript

J'utilise jQuery pour sélectionner l'élément d'entrée. Je l'ai mis en place avec un événement de changement.

$("#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 j'estime dignes de persister sur la page de soumission, avant que l'envoi ne se produise réellement. J'ajoute les fichiers "approuvés" à la valeur d'un élément d'entrée en utilisant jQuery pour qu'un formulaire envoie les noms des fichiers que je veux enregistrer. Tous les fichiers seront soumis, cependant, du côté du serveur, nous devons les filtrer. Je n'ai pas encore écrit de code pour cela, mais utilisez votre imagination. Je suppose que l'on peut accomplir cela par une boucle for et en faisant correspondre les noms envoyés depuis le champ d'entrée et les faire correspondre à la variable $ _FILES (PHP Superglobal, désolé, je ne connais pas de variable de fichier ruby).

Mon point est que vous pouvez faire des vérifications pour les fichiers avant la soumission. Je le fais et le transmets ensuite à l'utilisateur avant qu'il soumette le formulaire, pour lui faire savoir ce qu'il télécharge sur mon site. Tout ce qui ne répond pas aux critères ne s'affiche pas à l'utilisateur et 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 d'objet FormData.


62
2018-06-18 15:46



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 2 Mo, 1 Mo en octets est 1 048 576, vous pouvez donc le multiplier par la limite dont vous avez besoin.

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


9
2018-03-26 11:08