À l'aide de jQuery, la Restriction de la Taille du Fichier Avant de le télécharger

C'est une copie de mes réponses à une question très semblable: Comment vérifier l'entrée de fichier de taille avec jQuery?

---

Vous avez réellement n'avez pas accès au système de fichiers (par exemple la lecture et l'écriture de fichiers locaux). Toutefois, en raison de l'HTML5 Fichier de spécification de l'API, il y a quelques propriétés du fichier que vous avez accès à, et la taille de fichier est l'un d'entre eux.

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

Car c'est une partie de la spécification HTML5, cela ne fonctionne qu'avec les navigateurs modernes (v10 nécessaire pour IE) et j'ai ajouté ici plus de détails et des liens sur d'autres informations sur le fichier que vous devez savoir: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

Vieux navigateurs prennent en charge

Être conscient que les anciens navigateurs sera de retour d'une null valeur pour la précédente this.files appel, l'accès à this.files[0] va lever une exception et vous devriez vérifiez le Fichier de prise en charge des API avant de l'utiliser

J'ai essayé de cette façon et j'obtiens les résultats dans IE*, et Mozilla 3.6.16, na pas de 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 de la bibliothèque Jquery aussi.

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

LimitRequestBody 2097152

Cette limite à 2 mégaoctets (2 * 1024 * 1024) sur un téléchargement de fichier (si j'ai fait mon octet de mathématiques correctement).

Remarque lorsque vous effectuez cette opération, le journal des erreurs d'Apache va générer cette entrée lorsque vous dépassez cette limite sur un formulaire de requête post ou get:

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

Et il affiche également ce message dans le navigateur web:

<h1>Request Entity Too Large</h1>

Donc, si vous êtes en train de faire de l'AJAX formulaire de postes avec quelque chose comme le Malsup jQuery Forme de Plugin, vous pouvez piège pour le H1 ce type de réponse et de montrer un résultat d'erreur.

Par la voie, le numéro de l'erreur retournée est 413. Donc, vous pouvez utiliser une directive dans votre .fichier htaccess comme...

Redirect 413 413.html

...et de donner une plus gracieux résultat d'erreur en retour.

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

Si vous le pouvez, je vous recommande l'un des ci-dessous des solutions..à la fois, dont l'utilisation d'un composant flash pour le côté client validations; cependant, sont reliés à l'aide de Javascript/jQuery. Les deux fonctionnent très bien et peut être utilisé avec n'importe quel côté serveur tech.

http://www.uploadify.com/

http://swfupload.org/

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