Display Selected Files With jQuery File Input Preview Plugin

File Input Preview is a simple jQuery plugin designed to enhance and beautify standard file input elements. It offers an immediate visual confirmation to the users about the files they have selected for upload.

The plugin dynamically displays the name and size of selected files next to the file select button and allows users to unselect any file from the list with a single click. This enables users to verify the details of multiple selected documents or other file types before uploading.

See Also:

• 10 Best File Upload Libraries In jQuery And Vanilla JavaScript

How to use it:

1. Download and import the jQuery File Input Preview plugin's files.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/file-input-preview.js"></script>
<link rel="stylesheet" href="/path/to/file-input-preview.css">

2. Create an empty container to display the file list.

<div class="selected-files-container">
  <label for="fileInput" class="file-input-label">
    <span class="button-label">Choose Files</span>
  </label>
</div>

3. Call the plugin on the regular file input element and done.

<input type="file" id="fileInput" multiple>

$(document).ready(function() {
  $('#fileInput').fileInputPreview();
});

---

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