You may find plenty of great image uploader scripts on the net, but they are also complicated to configure and to implement without the help of professionals, especially if you are novice one. Those uploader(s) come with additional functions which you may not even need, so sometimes your best bet is to code your own image uploader script, 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 having to write additional code. It also supports numerous options that can easily adjust the behavior of the 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 baggage.
Have a look at code below, it simply checks empty text fields, 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 I think is a good thing to do!
We just need to attach above function to form plugin beforeSubmit callback, this function will then 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.
You can add additional text fields to your form and add required=”true” attribute if you want script to check for empty fields, this way we can avoid server side validation.
The backbone of this uploader is this PHP file, this is where uploaded image files are resized and then outputs are sent back to main page as Ajax response. In PHP script there are mainly two functions resize_image() and gen_thumbnail(). First one resize_image() will proportionally resize image depending on the original size, and the second one gen_thumbnail() will generate thumbnails by cropping images to exact size.
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 and Resize with ImageMagick, Ajax Image Upload/Resize (Progressbar) and Ajax File Upload (Progressbar) Good luck!