Easy DragnDrop AJAX Uploader Plugin For jQuery ssi uploader js - Free Download Easy Drag'n'Drop AJAX Uploader Plugin For jQuery - ssi-uploader.js

Free Download Easy Drag’n’Drop AJAX Uploader Plugin For jQuery – ssi-uploader.js

Posted on

This time I will share jQuery Plugin and tutorial about Easy Drag’n’Drop AJAX Uploader Plugin For jQuery – ssi-uploader.js, hope it will help you in programming stack.

Easy DragnDrop AJAX Uploader Plugin For jQuery ssi uploader js - Free Download Easy Drag'n'Drop AJAX Uploader Plugin For jQuery - ssi-uploader.js
File Size: 122 KB
Views Total: 9176
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ssi-uploader.js is an easy, customizable, jQuery dependent uploader which allows you to upload multiple allowed files with previews into the web server via AJAX requests. Drag’n’drop, i18n, callbacks are supported as well.

Basic usage:

1. First you need to load the latest version of jQuery library in the html document.

2. Then download and load the ssi-uploader plugin’s JavaScript & CSS files in the document.

1 <link href="ssi-uploader.min.css" rel="stylesheet">
2 <script src="ssi-uploader.min.js"></script>

3. The next step is to create an upload button together with the preview & drag’n’drop area on the webpage.

01 <div class="ssi-uploader">
02   <div class="ssi-buttonWrapper"><span class="ssi-InputLabel">
03     <button class="ssi-button success">Choose files</button>
04     <input type="file" multiple id="ssi-upload" class="ssi-uploadInput">
05     </span>
06     <button id="ssi-abortBtn" class="ssi-button error ssi-cancelAll ssi-hidden"><span class="inBtn">Abort </span></button>
07     <button id="ssi-uploadBtn" class="ssi-button success ssi-hidden"><span class="ssi-btnIn">Upload&nbsp;</span>
08     <div id="ssi-up_loading" class="ssi-btnIn"></div>
09     </button>
10     <button id="ssi-clearBtn" class="ssi-hidden ssi-button info">Clear</button>
11   </div>
12   <div id="ssi-previewBox" class="ssi-uploadBox ssi-previewBox ssi-dropZonePreview ssi-dropZone">
13     <div id="ssi-DropZoneBack">Drag n Drop</div>
14   </div>
15 </div>

4. At last, you need to call the function on the top element as this:

1 $('.ssi-upload').ssi_uploader({
2   url: 'upload.php'
3 });

5. Plugin’s default customization options:

01 $('.ssi-upload').ssi_uploader({
02  
03   // allows duplicates
04   allowDuplicates: false,
05  
06   // The utl to which the ajax request is sent.
07   url: '',
08  
09   // Sends extra data with the request.
10   data: {},
11  
12   // en, gr
13   locale: 'en',
14  
15   // Enables/disables the file preview.
16   preview: true,
17  
18   // Enables/disables drag and drop.
19   dropZone: true,
20  
21   // How many files are allowed per upload.
22   maxNumberOfFiles: '',
23  
24   // Setting up the response validation, ssi-uploader will be able to handle erros and display them.
25   // validationKey: {String||Object} Defines the validation key of the response. For
26   // resultKey: {String} Defines the validation key of the response.
27   // success: {String} Defines the success key of the response.
28   // error: {String} Defines the error key of the response.
29   response<a href="https://www.jqueryscript.net/tags.php?/Validation/">Validation</a>: false,
30  
31   // If true the upload will continue normally even if there is an error in a callback function.
32   // If false the upload will aborted, if it's possible, and will console.log the errors.
33   ignoreCallbackErrors: false,
34  
35   // Boolean or a function
36   // Transform file to form data
37   transformFile: true,
38  
39   // The maximum size of each file.
40   maxFileSize: null,
41  
42   // is in form
43   inForm: false,
44  
45   // Extends the default options of $.ajax function:
47   ajaxOptions: {},
48  
49   // The files allowed to be uploaded.
50   allowed: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
51  
52   // The method that will be used to display the messages.
53   errorHandler: {
54     method: function (msg) {
55       alert(msg);
56     },
57     success: 'success',
58     error: 'error'
59   }
60    
61 });

6. Callback functions.

01 $('.ssi-upload').ssi_uploader({
02  
03   // executed when the upload process end
04   onUpload: function () {
05   },
06  
07   // executed when each file finishes to uploading
08   onEachUpload: function () {
09   },
10  
11   // executed before an upload process starts
12   beforeUpload: function () {
13   },
14  
15   // executed just before each file starts to uploading