Validation de taille de téléchargement de fichier JavaScript

Question

Y a-t-il un moyen de vérifier la taille du fichier avant de le télécharger en utilisant JavaScript ?

Answer 1

Oui, vous pouvez utiliser le File API pour cela.

Voici un exemple complet (voir les commentaires) :

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (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) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

---

Légèrement hors sujet, mais : Notez que la validation côté client n'est pas un substitut à la validation côté serveur. La validation côté client est simplement là pour rendre possible une meilleure expérience utilisateur. Par exemple, si vous n'autorisez pas le téléchargement d'un fichier de plus de 5 Mo, vous pourriez utiliser la validation côté client pour vérifier que le fichier choisi par l'utilisateur ne dépasse pas 5 Mo et lui donner un message amical s'il le dépasse (pour qu'il ne passe pas tout ce temps à télécharger pour finalement voir le résultat rejeté côté serveur), mais vous devez aussi imposer cette limite côté serveur, car toutes les limites côté client (et d'autres validations) peuvent être contournées.

Answer 2

Utilisation de jQuery:

$('#image-file').on('change', function() {
  console.log('La taille de ce fichier est : ' + this.files[0].size / 1024 / 1024 + "MiB");
});

  Télécharger une image:

Answer 3

Si vous utilisez la validation jQuery, vous pourriez écrire quelque chose comme ceci :

$.validator.addMethod(
  "maxfilesize",
  function (value, element) {
    if (this.optional(element) || !element.files || !element.files[0]) {
      return true;
    } else {
      return element.files[0].size <= 1024 * 1024 * 2;
    }
  },
  'La taille du fichier ne peut pas dépasser 2 Mio.'
);

Answer 4

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

Si vous avez besoin de prendre en charge également les anciens navigateurs, vous devrez utiliser un programme de téléchargement basé sur Flash tel que SWFUpload ou Uploadify pour cela.

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

Notez que cela nécessite (évidemment) Flash, plus le fonctionnement est un peu différent des formulaires de téléchargement normaux.

Answer 5

Je utilise une fonction JavaScript principale que j'avais trouvée sur le site du Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, ainsi qu'une autre fonction avec AJAX et modifiée selon mes besoins. Elle reçoit un identifiant d'élément de document concernant l'emplacement dans mon code html où je veux écrire la taille du fichier.

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }

    var sOutput = nBytes + " bytes";
    // code optionnel pour une approximation en multiples
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}

document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");

Santé