web-dev-qa-db-fra.com

Client Vérifier la taille du fichier en utilisant HTML5?

J'essaie de surfer sur la vague HTML5 mais je suis confronté à un petit problème. Avant HTML5, nous vérifiions la taille du fichier avec Flash, mais la tendance actuelle est d'éviter l'utilisation de Flash dans les applications Web. Existe-t-il un moyen de vérifier la taille du fichier côté client en utilisant HTML5?

javascripthtml5file-upload
79
Khaled Musaied

Cela marche. Placez-le dans un écouteur d'événements pour le moment où l'entrée est modifiée.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
120
Abdullah Jibaly

La réponse acceptée est en fait correcte, mais vous devez la lier à un écouteur d'événements afin qu'il soit mis à jour chaque fois que l'entrée de fichier est modifiée.

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

Si vous utilisez la bibliothèque jQuery, le code suivant peut vous être utile.

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

Étant donné que la conversion de fileSize à afficher dans laquelle jamais métrique est à vous.

28
Ammadu

HTML5 fie api permet de vérifier la taille du fichier.

lisez cet article pour obtenir plus d'informations sur le fichier api

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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


var size = document.getElementById("fileInput").files[0].size;

de même, l'API de fichier donne le nom et le type.

7
Konga Raju

Personnellement, je choisirais ce format:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }
3
Alexander Leon

"pas de solution simple, multi-navigateur pour atteindre cet objectif": Détecter la taille de téléchargement de fichier côté client?

2
Julien