Drag'n'drop Multi File Uploader - jQuery Smart Uploader
File Size: | 20.4 KB |
---|---|
Views Total: | 12447 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A smart jQuery file uploader plugin for creating a drag and drop area around a file input that allows you to upload multiple files to the web server.
More features:
- Image preview.
- Allows to convert images to other formats: jpg, png, webp.
- Allows to resize the image to a specific size.
- Progress bar when uploading.
- Allows to specify the maximum size of file.
- AJAX upload enabled.
Basic usage:
1. Create a drag and drop area around your regular file input:
<form enctype="multipart/form-data" action="" method="post"> <div id="drop_zone" class="drop-zone"> <p class="title">Drop file here</p> <div class="preview-container"></div> </div> <input id="file_input" accept="image/*" type="file" multiple name="file"> </form>
2. Insert jQuery library and the jQuery smart uploader plugin into the webpage.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.smartuploader.js"></script>
3. Initialize the smart uploader and done.
$("#file_input").withDropZone("#drop_zone", { action: { name: "image", params: { preview: true, } }, });
4. The example CSS to style the smart uploader.
#file_input { display: none; } .drop-zone { cursor: pointer; user-select: none; color: #555; font-size: 18px; width: 400px; padding: 50px 0; margin: 50px auto; border: 2px dashed #0087F7; border-radius: 5px; background: white; } .drop-zone.hover { background: #ddd; border-color: #aaa; } .drop-zone.error { background: #faa; border-color: #f00; } .drop-zone.drop { background: #afa; border-color: #00a1ff; } .drop-zone.drop > .title { display: none; } .preview-container canvas { width: 150px; } .file-uploader-progress-bar { margin: 0 20px; } .file-uploader-progress-bar > * { background-color: #71a5f3; width: 0; height: 5px; border-radius: 5px; } .wrapper.uploading .progress { background-color: #8c8c8c; }
5. Customize the smart uploader with the following options.
$("#file_input").withDropZone("#drop_zone", { url: null, action: null, multiUploading: true, ifWrongFile: "show", maxFileSize: Number.POSITIVE_INFINITY, autoUpload: false, fileNameMatcher: /.*/, fileMimeTypeMatcher: /.*/, wrapperForInvalidFile: function(fileIndex) { return "<p>File: \"" + this.files[fileIndex].name + "\" doesn't support</p>'"; }, validateEach: function(fileIndex) { return true; }, validateAll: function(files) { return files; }, uploadBegin: function(fileIndex, blob) {}, uploadEnd: function(fileIndex, blob) {}, done: function() {}, ajaxSettings: function(settings, fileIndex, blob) {} });
Changelog:
2018-11-26
- add autoUpload; fixed some bugs
2017-08-28
- add autoUpload; fixed some bugs
This awesome jQuery plugin is developed by sagidM. For more Advanced Usages, please check the demo page or visit the official website.