You may find plenty of great image uploader on the net, but they are also very complicated to configure and to implement without the help of professionals, especially if you are novice one. Those uploader comes with additional functions which you may not even need, so sometimes your best bet is to create your own image uploader, which will serve the purpose and keep things simple.
Today we are going to create an Ajax based image uploader, which means the image file will be uploaded to server using Ajax request, without reloading the page. We will also be using HTML5 File API to check file size and image type before uploading, then with PHP support we will create two images, a re-sized image and square thumbnail out of the original file. The examples you’ll find here are pretty basic and easy to understand.
Our upload form contains a file input field, submit button, a loading image and <div> element to output any messages or errors from server. Loading image should only be displayed when upload process starts, otherwise it should remain hidden from users. I have also created a CSS file to make this form little stylish, which you’ll find in the sample file.
This tutorial uses jQuery Form plugin to make things easier, its a great plugin and allows us to submit forms using Ajax without writing additional code. It also supports numerous options that can easily adjust the behavior of our form. We just have to include this plugin in our form page and it takes care of everything. Have a look at the code below, see how simple it is to Ajax submit our form data using this form plugin? the amount of code required for jQuery Ajax is reduced to just $(this).ajaxSubmit(options); . We can now stop worrying about errors and start focusing on other areas that need attention.
Our form is ready to upload the image, but there’s one more thing we need to do with our image upload form. Thanks to HTML5 for introducing new File API, we can now check file size and type before even uploading it to the server, earlier things like these weren’t simple to achieve, because old browsers do not support File API, and alternative methods like Java or flash uploader were used, and those came with whole different things.
Have a look at code below, it simply checks File size and allowed file type using HTML5 File API support, in-case client is using old browsers such as internet explorer 6, it just outputs error asking to upgrade the browser, which is also a good thing to do!
We just need to attach above function to form plugin beforeSubmit callback, then this function will be invoked before the form is submitted, if image file size is too big or file type is not correct, the function will return false and then the form will not be submitted. This way we can avoid server side file validation, which also means 0 strain to the server.
The backbone of this uploader is this PHP file, this is where uploaded image file is sent for processing and then outputs are sent back to main page as Ajax response. Change the settings value of upload directory path, thumbnail size, image size as per your requirements, make sure upload directory is writable and path is correct.
In this PHP script there are two different functions resizeImage() and cropImage(). First one resizeImage() will proportionally resize image, it re-sizes according to specified size values but final size may vary depending on original size of image. And the cropImage() will crop image to exact given size no matter what its original size. I have used cropImage() to create thumbnails and for normal resize resizeImage() is used.
That’s all you need to create a Ajax based image uploader, which will resize and create thumbnail for you. The downloadable file contains PHP files, css, jQuery form plugin and may be some images. Hope it will help you create interesting upload form for your website and don’t forget to checkout my other similar articles here : Ajax Image Upload/Resize (Progressbar) and Ajax File Upload (Progressbar) Good luck!
Saran Chamling loves the web technology, and enjoys designing, exploring and writing about it @sanwebe.com. You can find him at Twitter, Google or Facebook.