Custom HTML5 File Input Plugin With jQuery - mn-file-upload

File Size: 12.2 KB
Views Total: 2594
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom HTML5 File Input Plugin With jQuery - mn-file-upload

mn-file-upload is a lightweight, easy-to-use jQuery plugin which transforms the normal HTML5 file input into a highly customizable file uploader with image preview.

How to use it:

1. Include the stylesheet in the head, and the JavaScript file at the bottom of the html page.

<link href="" rel="stylesheet">
<script src="//"></script>
<script src=""></script>

2. Create the file input following the html structure as this:

<div class="customFile">
  <span class="selectedFile">No file selected</span>
  <input type="file" name="inputName">

3. Call the function on the input field and done.


4. Config the file input with the following settings.


  // left, right or button
  display: 'left',

  // button text
  controlMsg : 'Choose a file',

  // message to show when no file selected
  noFileSelectedMsg : 'No file selected',

  // image preview element
  preview : '',

  // supported extensions
  previewSupportedExt : ['png', 'jpeg', 'jpg', 'gif']

5. You can also pass the options via data-OPTION attribute as this:

<div class="customFile" data-display="button" data-controlMsg="Choose a file">
  <span class="selectedFile">No file selected</span>
  <input type="file" name="inputName"  />

6. Callback functions available.


  beforeChange : function(){},
  afterChange : function(){},
  afterPreview : function(){}

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