WordPress Code Snippets

A fresh mix of code snippets and tutorials

jQuery Preview Selected Images


This jQuery script displays a live preview of the currently selected images, as selected from a file input field.

Given the following markup:

We can apply the following jQuery to display a preview of the selected images:

This snippet basically detects when the input field has selected files, and if so uses them as background-images for <div>s appended to the .image-preview <div>.

No editing to the code is required, but the markup provided in the example is rather basic, and should be fleshed out with complete form structure or whatever is required for your design.

Show Support

Like our new Facebook Page to show support!