Obtenir la taille du fichier avant le téléchargement


89

Existe-t-il un moyen de connaître la taille du fichier avant de télécharger le fichier en utilisant AJAX / PHP en cas de changement du fichier d'entrée?




Voici un tutoriel étape par étape pour obtenir le nom, le type et la taille du fichier codepedia.info
Satinder singh

Réponses:


132

Pour le HTML ci-dessous

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

essayez ce qui suit:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Voir le fil suivant:

Comment vérifier la taille d'entrée du fichier avec jQuery?


1
Le tableau de fichiers n'est-il pas inexistant sur Internet Explorer (anciennes versions)?
Tiago César Oliveira

4
Oui, cela ne fonctionne pas avant IE 10 et ne prend en charge que partiellement Android et iOS. caniuse.com/fileapi . Si c'était aussi simple que ça ...
styks

2
Je suppose que le résultat est en octets?
Erdal G.

4
@ErdalG. Bonne question! MDN est manquant la documentation, mais FileList.filesest un tableau ressemblant à des Fileobjets, ce qui est une extension de Glob. Et selon la spécification , Globdéfinit en effet la sizepropriété comme le nombre d' octets (0 pour un fichier vide). Alors oui, le résultat est en octets .
John Weisz

14
<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Travailler sur IE et FF


15
a voté contre car la réponse utilise ActiveX. en 2015, même Microsoft abandonne ActiveX. Bien que ce soit une suggestion raisonnable une fois donnée, je recommanderais aux développeurs d'éviter cela maintenant et à l'avenir.
scott stone

3
J'aime cette solution, car seules les anciennes versions d'IE retournent true pour window.ActiveXObject.
Rob Breidecker

@scottstone Je ne comprends pas pourquoi vous avez voté contre toutes les réponses prenant en charge les anciens navigateurs? Cette réponse est beaucoup plus claire que celles utilisant les empreintes digitales du navigateur et ne recommande en aucun cas à quiconque d'utiliser ActiveX.
Nicolas Bouvrette

@NicolasBouvrette - Je suis d'accord que cette réponse est beaucoup plus claire que les autres, mais je ne peux pas supprimer le vote défavorable pour le moment. La question d'origine ne demandait pas la compatibilité avec les anciennes versions d'IE, et cette réponse n'informe pas les lecteurs que la plupart du code est là pour prendre en charge les versions d'IE de 5 ans et plus.
scott stone

@scottstone En fait, un autre point tangible de mon point de vue sur pourquoi ne pas utiliser ActiveX est qu'il affiche un message d'avertissement dans IE, ce qui est une expérience utilisateur horrible (effrayante?).
Nicolas Bouvrette

13

Voici un exemple simple d'obtention de la taille d'un fichier avant le téléchargement. Il utilise jQuery pour détecter chaque fois que le contenu est ajouté ou modifié, mais vous pouvez toujours obtenir files[0].sizesans utiliser jQuery.

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Voici un exemple plus complet, une preuve de code de concept pour glisser-déposer des fichiers dans FormData et les télécharger via POST sur un serveur. Il comprend une simple vérification de la taille du fichier.


8

J'ai eu le même problème et il semble que nous n'avons pas eu de solution précise. J'espère que cela peut aider d'autres personnes.

Après avoir pris le temps d'explorer, j'ai finalement trouvé la réponse. Voici mon code pour obtenir une pièce jointe avec jQuery:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

Ceci est juste un exemple de code pour obtenir la taille du fichier. Si vous voulez faire d'autres choses, n'hésitez pas à changer le code pour satisfaire vos besoins.


J'aime celui-ci car il n'a pas besoin d'être mis sur l'événement de changement comme la solution la plus populaire. Et j'aime aussi le fait que vous m'ayez donné la permission de changer le code pour satisfaire mes besoins :)
Matt

8

Meilleure solution fonctionnant sur tous les navigateurs;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

de http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

MISE À JOUR: Nous utiliserons cette fonction pour vérifier si c'est un navigateur IE ou non

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}

3
a voté contre car la réponse utilise ActiveX. en 2015, même Microsoft abandonne ActiveX. Bien que ce soit une suggestion raisonnable une fois donnée, je recommanderais aux développeurs d'éviter cela maintenant et à l'avenir. -
scott stone

1
$ .browser a été supprimé de jQuery dans la version 1.9 (obsolète depuis la v 1.3).
Silvio Delgado

2
@scottstone c'est pour la compatibilité ascendante et ce n'est pas vrai Microsoft n'abdonnera pas ActiveX, il est trop utilisé dans beaucoup de choses et voici la preuve computerworld.com/article/2481188/internet
...

@SilvioDelgado Modifié et mis à jour, ils ont supprimé $ .browser dans un plugin, nous aurons donc besoin d'un petit test pour le navigateur IE (fonctionne avec toutes les versions)
ucefkh

4

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>


3

Les navigateurs prenant en charge HTML5 ont des propriétés de fichiers pour le type d'entrée. Cela ne fonctionnera bien sûr pas dans les anciennes versions d'IE.

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}

2

La solution d'ucefkh fonctionnait mieux, mais comme $ .browser était obsolète dans jQuery 1.91, a dû changer pour utiliser navigator.userAgent:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

1

vous devez faire une requête ajax HEAD pour obtenir la taille du fichier. avec jquery c'est quelque chose comme ça

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Mais si cette entrée de fichier est effacée (vide) ?? Pouvez-vous faire un exemple merci
DeLe

1

Veuillez ne pas l'utiliser ActiveXcar il y a de fortes chances qu'il affiche un message d'avertissement effrayant dans Internet Explorer et effraie vos utilisateurs.

Avertissement ActiveX

Si quelqu'un souhaite implémenter cette vérification, il ne doit s'appuyer que sur l' objet FileList disponible dans les navigateurs modernes et se fier aux contrôles côté serveur uniquement pour les navigateurs plus anciens ( amélioration progressive ).

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}

0

Vous pouvez utiliser la fonction de taille de fichier PHP. Pendant le téléchargement en utilisant ajax, veuillez d'abord vérifier la taille du fichier en faisant une requête une requête ajax au script php qui vérifie la taille du fichier et renvoie la valeur.



0

Personnellement, je dirais la réponse de Web World est la meilleure aujourd'hui, compte tenu des normes HTML. Si vous devez prendre en charge IE <10, vous devrez utiliser une forme d'ActiveX. J'éviterais les recommandations qui impliquent le codage contre Scripting.FileSystemObject, ou l'instanciation directe d'ActiveX.

Dans ce cas, j'ai eu du succès en utilisant des bibliothèques JS tierces telles que plupload qui peuvent être configurées pour utiliser des apis HTML5 ou des contrôles Flash / Silverlight pour remplir les navigateurs qui ne les prennent pas en charge. Plupload a une API côté client pour vérifier la taille du fichier qui fonctionne dans IE <10.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.