Javascript validation file size

Question

Is it possible to continue checking with javascript if the file size of the file on the web server (for example, http://www.mysite.com/myfile.js ) is more than 0 bytes and if so, return true or false value?

Thanks in advance!

Answer 1

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

A HEAD request is identical to a regular GET request except the server SHOULD NOT return the actual content. In other words, the server responds with headers that you would try a GET resource, but then stop and not send the file.

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

To do this, you will need to pray that your server will return the actual file size to the HEAD request.

If so, getting this value is easy :

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

Note that the JSFiddle server always returns 0 when we HEAD / , although / is 16916 bytes.

Also note that jQuery docs talks about an HTTP request type option:

Type of request ("POST" or "GET"), by default - "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 script in IE 6-10, Firefox 3.6-7, Opera 9-11, and Chrome, and each individual browser correctly issued a HEAD request, so I would not have to worry about this vague incompatibility statement. More to worry about how your server reacts.

Answer 2

Javascript does not have access to the file system (fortunately), so I'm afraid not.

Answer 3

The idea given by josh3736 is great. Only the code that he gave refused to work in my browser (Chrome 20, Firefox 13, IE 8, Opera 12) for the reason that I do not 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 also want to note that the Apache server on the XAMPP server works fine with the HEAD request, but, of course, when launched on localhost, such a request is blocked by the browser with the error message: "Origin localhost is not allowed using Access-Control-Allow-Origin" (example from Chrome).

Answer 4

IE: If you set Ie 'Document Mode' to "Standards", you can use the simple javascript "size" method to get the size of the downloaded file.

Set Ie 'Document Mode' to 'Standards':

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

Then, using javascript's "size" method to get the size of the downloaded file:

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

Other browsers: In all other browsers you can use javascript size method without any problems.