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 jquery.mn-file.css in the head, and the JavaScript file jquery.mn-file.js at the bottom of the html page.

<link href="jquery.mn-file.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.mn-file.js"></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">
</div>

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

$("[type=file]").mnFileInput();

4. Config the file input with the following settings.

$("[type=file]").mnFileInput({

  // 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"  />
</div>

6. Callback functions available.

$("[type=file]").mnFileInput({

  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.