Bootstrap / jQuery image upload preview plug-in

The image upload plug-in

If you require enabling your visitors uploading the image files through web forms and before uploading the image, preview it then img-upload plug-in can be the right choice.

The bootstrap-imageupload is a jQuery based plug-in that is implemented with Bootstrap framework. You may also use it independently if your website is not Bootstrap based.

The JS file size is only 12 Kb while its minified version is 5Kb size.

For setting up this preview image before uploading plug-in, follow these steps.

Step 1:

Simply download the image upload preview plug-in from the Github website here (Credit: egonolieux).

Note: You may also get the JS and CSS files from the demo page code section (view source to download files on your system).

Step 2:

Refer the JS file (bootstrap-imageupload.js) after the reference of the jQuery library.

Step 3:

Use the markup as shown in the demo below.

A demo of image previewing by using jQuery

As the demo page loads, you can see a few buttons. First of all, you may choose a file from your system by choosing the “File” option. This is the default selection.

You may also use the URL option by clicking that button. After entering the URL, press the submit button and image will be loaded in the preview area.

Once loaded, you may remove or change the image by using respective buttons. Have a look at the demo by clicking the image or link below:

jquery image upload preview

See online demo and code

The markup used for this example:

 

The simple script:

 

A demo of using the height and width options

In the above demo, you might notice the size of selected image is small. You may adjust the size as per desire by using the maxWidth and maxHeight options in the jQuery code.

You may also specify the maximum size of the image by maxFileSizeKb option.

Have a look at this demo where I used these options:

jquery image upload

See online demo and code

The markup remains the same as in the first example. Following jQuery code is used:

 

 

Finally, you may also restrict the image file formats by using the allowedFormats option with an array of values like .jpg, .png etc.