Javascript check file size

Question

Is it possible to keep checking with javascript if the filesize of a file on a webserver (e.g. http://www.mysite.com/myfile.js) is larger than 0 bytes and if so return a tru

Answer 1

Theoretically, you could use XHR to issue a HTTP HEAD request and check the Content-Length in the response headers.

A HEAD request is identical to a regular GET request except the server MUST NOT return the actual content. In other words, the server replies with the headers it would have had you tried to GET the resource, but then stops and does not send the file.

However, some severs respond to a HEAD request with a Content-Length header of 0, regardless of the actual size of the file. Others respond with the size of the file.

In order to accomplish this, you'll have to pray your server returns a file's actual size to a HEAD request.

If it does, getting that value is easy:

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

Note that JSFiddle's server always returns 0 when we HEAD /, even though / is 16916 bytes.

Also note what jQuery's docs say about the HTTP request type option:

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

I just tested this Fiddle in IE 6-10, Firefox 3.6-7, Opera 9-11, and Chrome, and every single browser correctly issued the HEAD request, so I wouldn't worry about that vague incompatibility statement. Of more concern is how your server responds.

Answer 2

The idea given by josh3736 is great. Only the code example he gave, refused to work in my browser (Chrome 20, Firefox 13, IE 8, Opera 12), for the reason, that I don't know.

Here is the one, that worked perfectly in my case:

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 + '"')}
});

I want also to notice, that Apache on-board XAMPP server works just fine with HEAD request, but of course, when run on localhost, such request is blocked by a browser with error message: "Origin localhost is not allowed by Access-Control-Allow-Origin" (example from Chrome).

Answer 3

Javascript has no access to the filesystem (thankfully) so I'm afraid not.

Answer 4

IE: If you set the Ie 'Document Mode' to 'Standards' you can use the simple javascript 'size' method to get the uploaded file's size.

Set the Ie 'Document Mode' to 'Standards':

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

Than, use the 'size' javascript method to get the uploaded file's size:

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

Other browsers: On all the other browsers you can use the javascript 'size' method without any problems.