Utilisation de jQuery, restriction de la taille du fichier avant le téléchargement
Sur PHP, ils ont un moyen de restreindre la taille du fichier APRÈS le téléchargement, mais pas AVANT le téléchargement. J'utilise Malsup jQuery Form Plugin pour la publication de mon formulaire, et il prend en charge la publication de fichiers image.
Je me demandais s'il y avait peut-être une restriction permettant de définir le nombre d'octets pouvant passer par ce flux AJAX vers le serveur? Cela pourrait me permettre de vérifier la taille du fichier et de renvoyer une erreur si le le fichier est trop volumineux.
En faisant cela du côté client, cela bloque les débutants qui prennent une photo de 10 Mo depuis leur Pentax et essaient de la télécharger.
Ceci est une copie de mes réponses à une question très similaire: Comment vérifier la taille d'entrée du fichier avec jQuery?
En fait, vous n'avez pas accès au système de fichiers (par exemple, lire et écrire des fichiers locaux). Cependant, en raison de la spécification de l'API de fichier HTML5, vous avez accès à certaines propriétés de fichier et la taille du fichier est l'une d'entre elles.
Pour ce HTML:
<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);
});
Comme il fait partie de la spécification HTML5, cela ne fonctionnera que pour les navigateurs modernes (v10 requis pour IE) et j'ai ajouté ici plus de détails et de liens sur d'autres informations sur les fichiers que vous devez connaître: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/
Prise en charge d'anciens navigateurs
Sachez que les anciens navigateurs renverront une valeur null pour la précédente this.files appeler, donc accéder à this.files[0] lèvera une exception et vous devriez vérifiez la prise en charge de l'API de fichier avant de l'utiliser
Je ne pense pas que ce soit possible à moins que vous n'utilisiez un flash, activex ou Java uploader.
Pour des raisons de sécurité, ajax/javascript n'est pas autorisé à accéder au flux de fichiers ou aux propriétés des fichiers avant ou pendant le téléchargement.
Je l'ai essayé de cette façon et j'obtiens les résultats dans IE * et Mozilla 3.6.16, je n'ai pas vérifié les anciennes versions.
<img id="myImage" src="" style="display:none;"><br>
<button onclick="findSize();">Image Size</button>
<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
function findSize() {
if ( $.browser.msie ) {
var a = document.getElementById('loadfile').value;
$('#myImage').attr('src',a);
var imgbytes = document.getElementById('myImage').size;
var imgkbytes = Math.round(parseInt(imgbytes)/1024);
alert(imgkbytes+' KB');
}else {
var fileInput = $("#loadfile")[0];
var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
var imgkbytes = Math.round(parseInt(imgbytes)/1024);
alert(imgkbytes+' KB');
}
}
</script>
Ajoutez également la bibliothèque Jquery.
J'ai rencontré le même problème. Vous devez utiliser ActiveX ou Flash (ou Java). La bonne chose est que cela n'a pas besoin d'être invasif. J'ai une méthode ActiveX simple qui retournera la taille du fichier à télécharger.
Si vous optez pour Flash, vous pouvez même faire des js/css sophistiqués pour personnaliser l'expérience de téléchargement - en utilisant uniquement Flash (comme un "film" 1x1) pour accéder à ses fonctionnalités de téléchargement de fichiers.
J'ai trouvé qu'Apache2 (vous voudrez peut-être également vérifier Apache 1.5) a un moyen de restreindre cela avant de le télécharger en le déposant dans votre fichier .htaccess:
LimitRequestBody 2097152
Cela le limite à 2 mégaoctets (2 * 1024 * 1024) lors du téléchargement de fichiers (si j'ai fait mes calculs d'octets correctement).
Notez que lorsque vous faites cela, le journal des erreurs Apache générera cette entrée lorsque vous dépassez cette limite sur un post de formulaire ou obtenez une demande:
Requested content-length of 4000107 is larger than the configured limit of 2097152
Et il affichera également ce message dans le navigateur Web:
<h1>Request Entity Too Large</h1>
Donc, si vous faites des messages de formulaire AJAX avec quelque chose comme le plugin Malsup jQuery Form, vous pouvez intercepter la réponse H1 comme ceci et afficher un résultat d'erreur.
Par ailleurs, le numéro d'erreur renvoyé est 413. Ainsi, vous pouvez utiliser une directive dans votre fichier .htaccess comme ...
Redirect 413 413.html
... et fournir un résultat d'erreur plus gracieux.
$(".jq_fileUploader").change(function () {
var fileSize = this.files[0];
var sizeInMb = fileSize.size/1024;
var sizeLimit= 1024*10;
if (sizeInMb > sizeLimit) {
}
else {
}
});
Comme d'autres l'ont dit, ce n'est pas possible avec seulement JavaScript en raison du modèle de sécurité de ce type.
Si vous en êtes capable, je recommanderais l'une des solutions ci-dessous .. dont les deux utilisent un composant flash pour les validations côté client; cependant, sont câblés à l'aide de Javascript/jQuery. Les deux fonctionnent très bien et peuvent être utilisés avec n'importe quelle technologie côté serveur.
Il n'est pas possible de vérifier la taille, la largeur ou la hauteur de l'image côté client. Vous devez avoir ce fichier téléchargé sur le serveur et utiliser PHP pour vérifier toutes ces informations. PHP a des fonctions spéciales comme: getimagesize()
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";
Essayez le code ci-dessous:
var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;
if (sizeInKB >= sizeLimit) {
alert("Max file size 30KB");
return false;
}