web-dev-qa-db-fra.com

Vérifier la taille du fichier avant le téléchargement

J'utilise ce javascript que j'ai obtenu d'ici, et il fonctionne parfaitement pour ce dont j'ai besoin.

var _validFileExtensions = [".jpg", ".jpeg"]; 

function File_Validator(theForm){
    var arrInputs = theForm.getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
    var oInput = arrInputs[i]; 
    if (oInput.type == "file") { 
        var sFileName = oInput.value; 
        var blnValid = false; 
            for (var j = 0; j < _validFileExtensions.length; j++) { 
                var sCurExtension = _validFileExtensions[j]; 
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { 
                    blnValid = true; 
                    break; 
                    } 
                } 

                if (!blnValid) { 
                    alert("Invalid image file type!"); 
                    return false; 
                } 
        } 
    } 

return true; 
}

Maintenant, je me demandais si, en plus, je pouvais vérifier la taille du fichier et échouer si le fichier est supérieur à 500 Ko -> tout avant d'appuyer sur le bouton soumettre/télécharger?

MODIFIER

Après avoir examiné ce que PHPMyCoder a suggéré, je finis par résoudre en utilisant ce code javascript:

<script language='JavaScript'>
function checkFileSize(inputFile) {
var max =  3 * 512 * 512; // 786MB

if (inputFile.files && inputFile.files[0].size > max) {
    alert("File too large."); // Do your thing to handle the error.
    inputFile.value = null; // Clear the field.
   }
}
</script>

Cela vérifie la taille du fichier et alerte l'utilisateur avant de soumettre le formulaire.

phpjavascriptfile-uploadimage-uploadingfilesize
31
cchap

Annulation du téléchargement côté client

Sur les navigateurs modernes (FF> = 3.6, Chrome> = 19.0, Opera> = 12.0 et buggy sur Safari), vous pouvez utiliser le API de fichier HTML5 . Lorsque la valeur d'une entrée de fichier change, cette API vous permettra de vérifier si la taille du fichier correspond à vos besoins. Bien sûr, ainsi que MAX_FILE_SIZE, peut être altéré, utilisez donc toujours la validation côté serveur.

<form method="post" enctype="multipart/form-data" action="upload.php">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

<script>
document.forms[0].addEventListener('submit', function( evt ) {
    var file = document.getElementById('file').files[0];

    if(file && file.size < 10485760) { // 10 MB (this size is in bytes)
        //Submit form        
    } else {
        //Prevent default and display error
        evt.preventDefault();
    }
}, false);
</script>

Annulation du téléchargement côté serveur

Côté serveur, il est impossible d'empêcher un téléchargement de se produire depuis PHP car une fois PHP a été invoqué, le téléchargement est déjà terminé. Si vous essayez pour économiser la bande passante, vous pouvez refuser les téléchargements du côté serveur avec le paramètre ini upload_max_filesize . Le problème est que cela s'applique à tous les téléchargements, vous devrez donc choisir quelque chose de libéral qui fonctionne pour tous vos téléchargements. L'utilisation de MAX_FILE_SIZE a été discuté dans d'autres réponses. Je suggère en lisant le manuel . Sachez que cela, ainsi que tout autre côté client (y compris la vérification javascript), peut être altéré, vous devriez donc toujours avoir une validation côté serveur (PHP).

Validation PHP

Côté serveur, vous devez valider que le fichier est dans les restrictions de taille (car tout jusqu'à ce point, à l'exception du paramètre INI, peut être altéré). Vous pouvez utiliser le $_FILES tableau pour connaître la taille du téléchargement. (Documents sur le contenu de $_FILES se trouve sous MAX_FILE_SIZE documents )

upload.php 

<?php
if(isset($_FILES['file']) {
    if($_FILES['file']['size'] > 10485760) { //10 MB (size is also in bytes)
        // File too big
    } else {
        // File within size restrictions
    }
}
50
Bailey Parker

J'ai créé une version jQuery de la réponse de PhpMyCoder:

$('form').submit(function( e ) {    
    if(!($('#file')[0].files[0].size < 10485760 && get_extension($('#file').val()) == 'jpg')) { // 10 MB (this size is in bytes)
        //Prevent default and display error
        alert("File is wrong type or over 10Mb in size!");
        e.preventDefault();
    }
});

function get_extension(filename) {
    return filename.split('.').pop().toLowerCase();
}
10
Firze