Utilisation de jQuery, Limitation de la taille du fichier avant le téléchargement

Question

Sur PHP, ils permettent de restreindre la taille du fichier APRÈS le téléchargement, mais pas AVANT le téléchargement. J'utilise le Malsup jQuery Form Plugin pour la publication de mon formulaire, et il prend en charge la publication de fichiers d'images. Je me demandais s'il y avait une restriction où je peux définir combien d'octets peuvent traverser ce flux AJAX jusqu'au serveur? Cela pourrait me permettre de vérifier la taille de ce fichier et retourner une erreur si le fichier est trop gros. En faisant cela du côté client, cela bloque les débutants qui prennent une photo de 10 Mo à partir de leur Pentax et essaient de télécharger cela.

Answer 1

Je ne pense pas que ce soit possible à moins d'utiliser un uploader flash, activex ou java. Pour des raisons de sécurité, ajax/javascript n'est pas autorisé à accéder au flux de fichiers ou aux propriétés du fichier avant ou pendant le téléchargement.

Answer 2

J'ai rencontré le même problème. Vous devez utiliser ActiveX ou Flash (ou Java). La bonne chose est que cela ne doit pas être envahissant. J'ai une méthode ActiveX simple qui retournera la taille du fichier à télécharger. Si vous utilisez Flash, vous pouvez même faire un peu de js/css pour personnaliser l'expérience de téléchargement - en utilisant uniquement Flash (en tant que film 1x1) pour accéder aux fonctions de téléchargement de fichiers.

Answer 3

J'ai trouvé que Apache2 (vous pouvez vérifier aussi Apache 1.5) a un moyen de limiter ce avant de le télécharger en laissant tomber dans votre fichier .htaccess:

LimitRequestBody 2097152

Cela limite à 2 mégaoctets (2 * 1024 * 1024) sur le téléchargement de fichier (si j'ai fait mes calculs d'octets correctement).

Remarque lorsque vous faites cela, le journal des erreurs Apache va générer cette entrée lorsque vous dépassez cette limite sur un poste de forme ou obtenir la demande:

Requested content-length of 4000107 is larger than the configured limit of 2097152 

Et il affichera aussi transmettre ce message dans le navigateur Web :

<h1>Request Entity Too Large</h1> 

donc, si vous faites des postes de forme AJAX avec quelque chose comme le formulaire jQuery Malsup Plugin, vous pouvez piège pour la réponse H1 comme celui-ci et afficher un résultat d'erreur.

Par ailleurs, le numéro d'erreur retourné 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 retour.

Answer 4

Comme d'autres l'ont dit, ce n'est pas possible avec JavaScript seulement en raison du modèle de sécurité de tels.

Si vous le pouvez, je recommanderais l'une des solutions ci-dessous ... dont deux utilisent un composant flash pour les validations côté client; cependant, sont câblés en utilisant Javascript/jQuery. Les deux fonctionnent très bien et peuvent être utilisés avec n'importe quelle technologie côté serveur.

http://www.uploadify.com/

http://swfupload.org/

Answer 5

Il est impossible de vérifier la taille de l'image, la largeur ou la hauteur du 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\" />"; 

Answer 6

Je l'ai essayé de cette façon et je reçois les résultats dans IE *, et Mozilla 3.6.16, na pas vérifier dans 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> 

Ajouter également la bibliothèque Jquery.

Answer 7

Ceci est une copie de mes réponses à une question similaire: How to check file input size with jQuery?

---

Vous n'avez pas l'accès au système de fichiers (par exemple la lecture et l'écriture de fichiers locaux). Toutefois, en raison de la spécification de l'API de fichier HTML5, certaines propriétés de fichier vous sont accessibles et la taille du fichier en fait partie.

Pour ce HTML:

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

les opérations suivantes:

//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, il ne fonctionnera que pour les navigateurs modernes (v10 requis pour IE) et J'ai ajouté here plus de détails et liens sur d'autres informations de fichier que vous devriez connaître: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

Les anciens navigateurs prennent en charge

Soyez conscient que les anciens navigateurs renverront une valeur null pour l'appel this.files précédent, donc l'accès this.files[0] déclenche une exception et vous devriez check for File API support avant de l'utiliser

Answer 8

$(".jq_fileUploader").change(function() { 
    var fileSize = this.files[0]; 
    var sizeInMb = fileSize.size/1024; 
    var sizeLimit= 1024*10; 
    if (sizeInMb > sizeLimit) { 


    } 
    else { 


    } 
    });