Validation de la taille de téléchargement des fichiers JavaScript

255

Existe-t-il un moyen de vérifier la taille du fichier avant de le télécharger à l'aide de JavaScript?

javascript validation file-upload Arche
la source

327

Oui , il existe une nouvelle fonctionnalité du W3C prise en charge par certains navigateurs modernes, l' API File . Il peut être utilisé à cette fin, et il est facile de tester s'il est pris en charge et de retomber (si nécessaire) sur un autre mécanisme s'il ne l'est pas.

Voici un exemple complet:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<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>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

Et le voici en action. Essayez cela avec une version récente de Chrome ou Firefox.

Légèrement hors sujet, mais: Notez que la validation côté client ne remplace pas la validation côté serveur. La validation côté client vise uniquement à permettre 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 pouvez utiliser la validation côté client pour vérifier que le fichier que l'utilisateur a choisi ne dépasse pas 5 Mo et lui donner un joli message convivial s'il l'est. (ils ne passent donc pas tout ce temps à télécharger uniquement pour obtenir le résultat sur le serveur), mais vous devez également appliquer cette limite au serveur, car toutes les limites côté client (et autres validations) peuvent être contournées.

TJ Crowder
la source

12

+1 pour "toutes les limites côté client (et autres validations) peuvent être contournées". Cela est tout aussi vrai pour les applications frontales de base de données "natives" / "compilées". Et ne mettez pas les mots de passe d'accès à la base de données dans votre code compilé, pas même "cryptés" (avec un mot de passe qui est aussi dans le code - venez de le voir récemment).

masterxilo

118

Utilisation de jquery:

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>

Ben
la source

2

@ipd, une chance de repli IE8? (Je me déteste même pour avoir mentionné IE)

Asher

2

Celui-ci fonctionne bien mais fonctionne-t-il également pour plusieurs fichiers?

Ingus

4

Cela devrait être le MiBcas si vous calculez à la base de 1024.

slartidan

69

Fonctionne pour l'élément de fichier dynamique et statique

Solution Javascript uniquement

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }

 <input onchange="ValidateSize(this)" type="file">

Développer l'extrait

Arun Prasad ES
la source

1

Bonne réponse. J'avais le même problème mais votre solution a fonctionné pour moi :)

Dipankar Das

1

NB OP a modifié le message afin que le code soit maintenant correct, en utilisant la sizepropriété

UsAndRufus

1

Merci pour la réponse, je faisais presque la même chose mais avec un seul changement. $(obj).files[0].size/1024/1024; Mais changé enobj.files[0].size/1024/1024;

shakir Baba

Existe-t-il un moyen de l'étendre pour la validation de la largeur et de la hauteur? (en laissant un "fichier" comme point de départ et en supposant qu'il se réfère à une image)

jlmontesdeoca

@jlmontesdeoca Je pense que vous pourriez lire le fichier à l'aide de canvas et obtenir sa hauteur et sa largeur ici même.

Arun Prasad ES

14

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

Si vous devez également prendre en charge les navigateurs plus anciens, vous devrez utiliser un programme de téléchargement Flash tel que SWFUpload ou Uploadify pour ce faire.

La démonstration des fonctionnalités de SWFUpload montre comment le file_size_limitparamètre fonctionne.

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

Pekka
la source

14

C'est assez simple.

            var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

            if (oFile.size > 2097152) // 2 mb for bytes.
            {
                alert("File size must under 2mb!");
                return;
            }

Hasan Tuna Oruç
la source

Meilleure réponse. doux et simple ... :)

A. Sinha

12

Si vous utilisez jQuery Validation, vous pouvez é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;
        }
    },
    'The file size can not exceed 2MB.'
);

Nikolaos Georgiou
la source

4

J'ai fait quelque chose comme ça:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

Développer l'extrait

kibus90
la source

Cela dit javascript, JQuery n'est pas dans les balises

Hello234

3

J'utilise une fonction Javascript principale que j'avais trouvée sur le site 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 en fonction de mes besoins. Il reçoit un identifiant d'élément de document concernant l'endroit dans mon code html où je veux écrire la taille du fichier.

<Javascript>

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";
    // optional code for multiples approximation
    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;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

À votre santé

Jose Gaspar
la source

3

Même si la question est répondue, je voulais poster ma réponse. Pourrait être utile aux futurs téléspectateurs.Vous pouvez l'utiliser comme dans le code suivant.

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents.substr(1, contents.indexOf("n"))
        ); 
        if(f.size > 5242880) {
               alert('File size Greater then 5MB!');
                }


      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

Lemon Kazi
la source

3

L'exemple JQuery fourni dans ce fil était extrêmement obsolète, et google n'était pas du tout utile alors voici ma révision:

 <script type="text/javascript">
        $('#image-file').on('change', function() {
            console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
        });
    </script>

nodws
la source

1

Vous pouvez essayer ce fineuploader

Cela fonctionne bien sous IE6 (et supérieur), Chrome ou Firefox

anson
la source

3

Fine Uploader n'est pas en mesure de valider la taille du fichier dans IE9 et les versions antérieures car la prise en charge de l'API de fichiers n'est pas prise en charge. IE10 est la première version d'Internet Explorer qui prend en charge l'API de fichiers.

Ray Nicholus

-2

Si vous définissez le «Mode Document» sur «Standards», vous pouvez utiliser la méthode simple «taille» javascript pour obtenir la taille du fichier téléchargé.

Réglez le «Mode document» sur «Normes»:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Ensuite, utilisez la méthode javascript 'size' pour obtenir la taille du fichier téléchargé:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

Ça marche pour moi.

Lilla
la source

1

Cela ne fonctionnera pas dans IE9 ou une version antérieure, peu importe les balises META que vous ajoutez.

Ray Nicholus

Validation de la taille de téléchargement des fichiers JavaScript

Réponses: