How to show javascript notification during a uploading an image/File???

Question

Hello

I have a upload box which is used to upload image. I want to restrict the user to upload a particular sized image. Such as, user can't upload a image which is larger than the allowed width, height. If someone tries to select such, then i want to show him a message on client side using javascript before uploading the image.

So can you have some idea regarding this. I am using the following tools for my project

• Codeigniter
• Jquery

thanks in advance.

Answer 1

Its not 'exactly' what you wanted, but you can use PHP's getimagesize() function to get the dimensions after you have uploaded it. If it is too big, instead of copying it from the temp folder to the uploads folder, you can give him an error.

Searching through the StackOverflow archives, I can't seem to find a solution through Javascript.

Answer 2

You cannot access local files on the client side. To get the size of an image you will have to upload it one way or another. If you'd rather not reload the page, you might be able to upload it with AJAX behind the scenes, but that's the extent of it.

EDIT: For the latter, you can use something like this script. In the server side file, use $_FILES to get the file, then getimagesize() to get the size. If the size is valid, save the file and you're done with the upload. If not, echo an error message and it will be passed to the JavaScript in a callback, where you can prettify and display it.

Answer 3

This could be with an ActiveX control or a signed Java Applet client-side, but running those require user permission.

Answer 4

This isn't useful in a practical sense right now, but in the (hopefully not too distant) future you can use the HTML5 file api for something like this.

http://dev.w3.org/2006/webapi/FileAPI/

https://developer.mozilla.org/en/Using_files_from_web_applications

Answer 5

You can't notify them, but you can't deny bigger files on upload - thus saving bandwidth and being nicer to server:

<input type="hidden" name="MAX_FILE_SIZE" value="size-in-kb" />

than when in php going through upload, it will notice you that file wasn't even uploaded, because too big. More here: http://forums.devshed.com/php-development-5/max-upload-size-how-to-give-notice-to-user-500259.html