This time I will share jQuery Plugin and tutorial about Drag And Drop File Uploader With Preview – Imageuploadify, hope it will help you in programming stack.
File Size: | 12.4 KB |
---|---|
Views Total: | 36092 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Imageuploadify is a jQuery & Bootstrap plugin that converts the normal file input into a drag’n’drop multi-file upload control with files (images) preview support. You can either browse for multiple files or drag and drop files into the control.
How to use it:
1. Include the needed jQuery library, Twitter’s Bootstrap and Font Awesome icon font on the html page.
1 |
< link rel = "stylesheet" href = "bootstrap.min.css" > |
2 |
< link rel = "stylesheet" href = "font-awesome.min.css" > |
3 |
< script src = "jquery.min.js" ></ script > |
4 |
< script src = "bootstrap.min.js" ></ script > |
2. Put the jQuery imageuploadify plugin’s files in the page.
1 |
< script " src = "imageuploadify.js" ></ script > |
2 |
< link href = "dist/imageuploadify.min.css" rel = "stylesheet" >< br type = "_moz" > |
3. Call the function imageuploadify()
on the regular file input and the plugin will do the rest.
1 |
< input type = "file" multiple> |
1 |
$( 'input[type="file"]' ).imageuploadify(); |
4. Set the file types allowed using the accept
attribute like this:
1 |
< input type = "file" accept = ".xlsx,.xls,image/*,.doc,audio/*,.docx,<a href=" https://www.jqueryscript.net/tags.php?/video/">video</ a >/*,.ppt,.pptx,.txt,.pdf" multiple> |
Change log:
2016-11-15
- Add minify version, separate CSS from JS, clean code, fix issues
2016-11-10
- Submitting form redirect to original redirected location
2016-11-08
- Full responsive, fix drag’n drop issue with Chrome
2016-11-04
- Add onsubmit form to add drag’n drop files, fixes some issues
2016-10-31
- Fix issues (missing event obj and button should not submit form)
This awesome jQuery plugin is developed by wpic. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net