Using jQuery, file size limit before downloading

Question

In PHP, they have a way to limit the file size AFTER the download, but not BEFORE the download. I use the Malsup jQuery Form Plugin to publish my form and supports publishing image files.

I was wondering if there could be a restriction in which I can set how many bytes can go through this AJAX stream to the server? This may allow me to check this file size and return an error if the file is too large.

By doing this on the client side, it blocks those beginners who take a 10 MB snapshot from their Pentax and try to download it.

Answer 1

This is a copy of my answers in a very close question: How to check file input size using jQuery?

---

You actually do not have access to the file system (for example, reading and writing local files). However, due to the specification of the HTML5 API files, there are some file properties that you have access to, and the file size is one of them.

For this HTML:

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

try the following:

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

Since it is part of the HTML5 specification, it will only work for modern browsers (v10 is required for IE), and I have added more detailed information and links to other file information that you should know here: http://felipe.sabino.me / javascript / 2012/01/30 / javascipt-checking-the-file-size /

---

Support for older browsers

Remember that older browsers will return null for the previous call to this.files , so accessing this.files[0] will throw an exception, and you should check the support of the File API before using it

Answer 2

I do not think this is possible if you are not using flash, activex or java uploader.

For security reasons, ajax / javascript does not have permission to access the file stream or file properties before or during loading.

Answer 3

I tried it like this and I get the results in IE * and Mozilla 3.6.16, did not check old 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> 

Add the jQuery library as well.

Answer 4

I ran into the same problem. You must use ActiveX or Flash (or Java). Good thing this should not be invasive. I have a simple ActiveX method that will return the size of the uploaded file.

If you switch to Flash, you can even pretend to be js / css to try out the download - just use Flash (like a 1x1 movie) to access file upload features.

Answer 5

I found that Apache2 (you can also check Apache 1.5) has a way to limit this before downloading by dropping this in the .htaccess file:

LimitRequestBody 2097152

This limits it to 2 megabytes (2 * 1024 * 1024) when downloading a file (if I did my byte math correctly).

Note that when you do this, the Apache error log will generate this entry if you exceed this limit for a form post or receive a request:

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

And it will also display this message in a web browser:

 <h1>Request Entity Too Large</h1> 

So, if you are making AJAX form entries with something like the Malsup jQuery Form Plugin, you can trap for an H1 response like this and show the result of the error.

By the way, the returned error number is 413. Thus, you can use the directive in the .htaccess file, for example ...

 Redirect 413 413.html 

... and return the result of a more elegant error.

Answer 6

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

Answer 7

Like others, this is not possible with JavaScript alone because of this security model.

If you are able, I would recommend one of the solutions below. Both of them use a flash component for client-side validation; however, they connect via Javascript / jQuery. Both work very well and can be used with any server-side technology.

http://www.uploadify.com/

http://swfupload.org/

Answer 8

It is not possible to check the size, width or height of the image on the client side. You need to upload this file to the server and use PHP to check all this information. PHP has special functions: getimagesize()

 list($width, $height, $type, $attr) = getimagesize("img/flag.jpg"); echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";