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" 
       class="demo" 
       multiple 
       data-jpreview-container="#preview-container">
       
<div id="preview-container" 
     class="jpreview-container">
</div>

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

$('.demo').jPreview();

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:

2017-10-08

• JS update

---

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