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

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?

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?

<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

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.

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.

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

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

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

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

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.

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

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.

Vous pouvez en utilisant l'API de fichier HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Cependant, vous devriez toujours avoir une solution de secours pour PHP (ou tout autre langage d'arrière-plan que vous utilisez) pour les navigateurs plus anciens.

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.