Vérifier Javascript la taille du fichier

Théoriquement, vous pouvez utiliser XHR pour émettre une requête HEAD HTTP et vérifier la Content-Length dans les en-têtes de réponse.

Une requête HEAD est identique à une requête GET régulière, sauf que le serveur NE DOIT PAS retourner le contenu réel. En d'autres termes, le serveur répond avec les en-têtes qu'il aurait tenté d'obtenir la ressource, mais s'arrête et ne l'envoie pas.

Cependant, certains sélecteurs répondent à une requête HEAD avec un en Content-Length tête Content-Length de 0 , quelle que soit la taille réelle du fichier. D'autres répondent avec la taille du fichier.

Pour ce faire, vous devrez prier pour que votre serveur renvoie la taille réelle d'un fichier à une requête HEAD .

Si c'est le cas, obtenir cette valeur est facile :

 $.ajax('/myfile.js', { type: 'HEAD', success: function(d,r,xhr) { fileSize = xhr.getResponseHeader('Content-Length'); } }); 

Notez que le serveur de JSFiddle renvoie toujours 0 lorsque HEAD / , même si / est 16916 octets.

Notez également ce que les docteurs de jQuery parlent de l'option de type de requête HTTP:

Le type de demande à faire ("POST" ou "GET"), par défaut, est "GET". Remarque: D'autres méthodes de requêtes HTTP, telles que PUT et DELETE, peuvent également être utilisées ici, mais elles ne sont pas prises en charge par tous les navigateurs.

Je viens de tester ce Fiddle dans IE 6-10, Firefox 3.6-7, Opera 9-11 et Chrome, et chaque navigateur a correctement émis la requête HEAD , donc je ne m'inquiéterais pas de cette déclaration d'incompatibilité vague. Plus de préoccupation est la façon dont votre serveur répond.

Javascript n'a pas accès au système de fichiers (heureusement), donc je n'ai pas peur.

L'idée donnée par josh3736 est géniale. Seul l'exemple de code qu'il a donné, a refusé de travailler dans mon navigateur (Chrome 20, Firefox 13, IE 8, Opera 12), pour le motif, je ne sais pas.

Voici celui qui fonctionnait parfaitement dans mon cas:

 jQuery.ajax ({ cache: false, type: 'HEAD', url: 'myfile.js', success: function(d,r,xhr){alert('File size is ' + xhr.getResponseHeader('Content-Length') + ' bytes.')}, error: function(xhr, desc, er){alert('ERROR: "' + xhr.responseText + '"')} }); 

Je veux également remarquer que le serveur XAMPP intégré d'Apache fonctionne très bien avec la requête HEAD , mais bien sûr, lorsqu'il est exécuté sur localhost, cette requête est bloquée par un navigateur avec un message d'erreur: "Origine localhost n'est pas autorisé par Access-Control -Allow-Origin "(exemple de Chrome).

IE: si vous définissez Ie 'Document Mode' sur 'Standards', vous pouvez utiliser la méthode simple 'size' de javascript pour obtenir la taille du fichier téléchargé.

Réglez Ie 'Document Mode' en 'Standards':

 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 

Que, utilisez la méthode javascript 'size' pour obtenir la taille du fichier téléchargé:

 <script type="text/javascript"> var uploadedFile = document.getElementById('imageUpload'); var fileSize = uploadedFile.files[0].size; alert(fileSize); </script> 

Autres navigateurs: sur tous les autres navigateurs, vous pouvez utiliser la méthode 'taille' javascript sans aucun problème.