Client Vérification de la taille du fichier en utilisant HTML5?

Question

J'essaie de monter la vague HTML5 mais je suis confronté à un petit problème. Avant HTML5, nous vérifions la taille du fichier avec flash, mais maintenant la tendance est d'éviter d'utiliser le flash dans les applications web. Est-il possible de vérifier la taille du fichier côté client en utilisant HTML5?

Answer 1

Cela fonctionne. Placez-le dans un écouteur d'événement lorsque l'entrée change.

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

Answer 2

"pas de solution simple multi-navigateur pour y parvenir": Detecting file upload size on the client side?

Answer 3

HTML5 fie api prend en charge la vérification de la taille du fichier.

lire 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; 

fichier API donne de la même nom et le type.

Answer 4

Uploadify pouvez télécharger des fichiers avec HTML5. Il y a aussi une version flash.

Vous pouvez définir les limites de taille de fichier, avec le paramètre 'fileSizeLimit'.

Answer 5

La réponse acceptée est réellement correcte, mais vous devez la lier à un écouteur d'événement afin qu'il soit mis à jour chaque fois que l'entrée du 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 puis le code suivant peut être pratique

$('#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 du fileSize pour afficher dans lequel jamais métrique est à vous.

Answer 6

Personnellement, j'opter pour 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 
     } 
    }