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.
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.
1 |
< script src = "http://code.jquery.com/jquery.min.js" ></ script > |
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 </ 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 |