web-dev-qa-db-fra.com

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

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

javascriptvalidationfile-upload
212
ArK

Oui, il existe une nouvelle fonctionnalité du W3C prise en charge par certains navigateurs modernes, l’API Fichier . Il peut être utilisé à cette fin. Il est facile de vérifier s'il est pris en charge et de recourir (si nécessaire) à un autre mécanisme si ce n'est pas le cas.

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 ici il est en action. Essayez avec une version récente de Chrome ou Firefox.

Légèrement hors sujet, mais: Notez que la validation côté client est no substitute pour la validation côté serveur. La validation côté client vise uniquement à offrir une expérience utilisateur plus agréable. 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 choisi par l'utilisateur n'a pas plus de 5 Mo de taille et lui envoyer un message convivial, le cas échéant. (afin qu’ils ne passent pas tout ce temps à télécharger uniquement pour obtenir le résultat jeté sur le serveur), mais vous devez aussi appliquer cette limite au serveur, car toutes les limites côté client (et autres validations) peuvent être contourné.

279
T.J. Crowder

En utilisant 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>
104
Ben

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

Si vous devez également prendre en charge des navigateurs plus anciens, vous devrez utiliser un programme de téléchargement basé sur Flash, tel que SWFUpload ou Uploadify .

La démo de SWFUpload Features montre le fonctionnement du paramètre file_size_limit.

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

13
Pekka 웃

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;
            }
10
Hasan Tuna Oruç

Si vous utilisez la validation jQuery, 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.'
);
9
Nikolaos Georgiou

J'utilise une fonction Javascript principale 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, modifiée à mes besoins. Il reçoit un identifiant d'élément de document concernant l'emplacement 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é

3
Jose Gaspar

Même si la question est répondue, je voulais poster ma réponse. Peut être utile pour les 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");
    }
  }
3
Lemon Kazi

L'exemple JQuery fourni dans ce fil de discussion était extrêmement obsolète, et Google ne m'a pas du tout aidé, voici donc 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>
2
nodws

Vous pouvez essayer ceci bien uploader

Cela fonctionne très bien sous IE6 (et au-dessus), Chrome ou Firefox

1
anson

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');
} 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">

0
kibus90