Comment puis-je obtenir la taille de téléchargement d'un fichier en utilisant du Javascript simple?

StackOverflow https://stackoverflow.com/questions/1606842

  •  05-07-2019
  •  | 
  •  

Question

J'ai la fonctionnalité de téléchargement de fichier sur l'une des pages. Je vérifie l'extension du fichier en utilisant JavaScript. Maintenant, je veux empêcher l'utilisateur de télécharger un fichier supérieur à 1 Mo. Existe-t-il un moyen de vérifier la taille de téléchargement du fichier à l'aide de JavaScript?

Mon code ressemble actuellement à ceci:

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>
Était-ce utile?

La solution

Autre que l'acquisition du nom de fichier, il est impossible pour vous de trouver d'autres détails sur le fichier en javascript, y compris sa taille.

A la place, vous devez configurer un script côté serveur pour bloquer un téléchargement surdimensionné.

Autres conseils

Voir http://www.w3.org/TR/FileAPI/ . Il est supporté par Firefox 3.6; Je ne connais aucun autre navigateur.

Dans l'événement onchange d'un <input id="fileInput" type="file" /> simplement:

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

Vous pouvez également renvoyer le contenu du fichier sous forme de chaîne, etc. Mais encore une fois, cela ne fonctionne qu'avec Firefox 3.6.

Il est maintenant possible d’obtenir la taille du fichier en utilisant du JavaScript pur. Presque tous les navigateurs prennent en charge FileReader, que vous pouvez utiliser pour lire la taille du fichier et vous pouvez afficher une image sans télécharger le fichier sur le serveur. lien

Code:

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

Vous pouvez obtenir la taille de fichier directement à partir d'un objet de fichier à l'aide du code suivant.

 var fileSize = oFile.size;

La plupart de ces réponses sont dépassées. Il est actuellement possible de déterminer la taille du fichier côté client dans tout navigateur prenant en charge l’API de fichier. Cela inclut à peu près tous les navigateurs autres que IE9 et les versions antérieures.

Cela pourrait être possible d’utiliser beaucoup de code spécifique au navigateur. Jetez un coup d’œil à la source de TiddlyWiki , qui parvient à se sauvegarder sur le disque dur de l'utilisateur en se connectant à Windows Scripting Host (IE), XPCOM (Mozilla), etc.

Je ne pense pas qu'il soit possible de faire cela avec JS simple à partir d'une page Web.
Avec une extension de navigateur peut-être, mais à partir d'une page, javascript ne peut pas accéder au système de fichiers pour des raisons de sécurité.

Flash et Java devraient avoir des restrictions similaires, mais elles sont peut-être un peu moins strictes.

pas possible. Le fait d’autoriser l’exécution de scripts côté client permettant de lire les informations sur les fichiers et le disque dur des utilisateurs finaux serait un problème de sécurité majeur.

Voir ici:

http: // www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

Quant à tous ceux qui disent que cela doit être fait côté serveur, ils sont absolument à la hauteur.

Dans mon cas, si la taille maximale que je vais utiliser est de 128 Mo, si un utilisateur essaie de télécharger quelque chose qui fait 130 Mo, il ne devrait pas avoir à attendre le temps de chargement de 5 minutes pour le découvrir trop grand. vérification supplémentaire avant de soumettre la page pour des raisons de convivialité.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top