Minimalist Image Preview For File Input - jQuery jpreview

File Size: 5.67 KB
Views Total: 6316
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Image Preview For File Input - jQuery jpreview

jpreview is a really small jQuery plugin which allows you to preview images before uploading. Supports single or multiple file input.

How to use it:

1. Download and put the JavaScript file jpreview.js after jQuery library.

<script src="jquery.min.js"></script>
<script src="jpreview.js"></script>

2. Put the required stylesheet jpreview.css in the document's head section.

<link rel="stylesheet" href="jpreview.css">

3. Create an image preview container for your file input.

<input type="file" 
<div id="preview-container" 

4. Initialize the plugin on the input field. That's it.


5. Change the default CSS styles of the image preview.

.jpreview-image {
  width : 100px;
  height : 100px;
  margin: 10px;
  position : relative;
  float : left;
  background-repeat : no-repeat;
  background-position : center center;
  -webkit-background-size : cover;
  -moz-background-size : cover;
  -o-background-size : cover;
  background-size : cover;

.jpreview-container::after {
  content: ".";
  visibility: hidden;
  display: block;
  clear: both;

.jpreview-image img {
  max-width: 100%;
  max-height: 100%

Change log:


This awesome jQuery plugin is developed by buivannguyen. For more Advanced Usages, please check the demo page or visit the official website.