This time I will share jQuery Plugin and tutorial about Drag And Drop File Upload Plugin For Bootstrap – dropzone, hope it will help you in programming stack.
| File Size: | 18.6 KB |
|---|---|
| Views Total: | 48864 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
dropzone is a jQuery plugin used to create a highly customizable drag’n’drop zone for file uploading with a progress bar. Your user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. Based on Bootstrap styles.
How to use it:
1. Include the needed jQuery library and Bootstrap framework on the webpage.
1 |
<link rel="stylesheet" href="bootstrap.min.css"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="bootstrap.min.js"></script> |
2. Create a container to place the file upload zone.
1 |
<div class="dropzone"></div> |
3. Active the plugin and specify the file or url you wish to post the files.
1 |
$(".dropzone").dropzone({ |
2 |
url: 'upload.php' |
3 |
}) |
4. All customization options with default values.
01 |
// width of the div |
02 |
width: 300, |
03 |
04 |
// height of the div |
05 |
height: 300, |
06 |
07 |
// width of the progress bars |
08 |
progressBarWidth: '100%', |
09 |
10 |
// url for the ajax to post |
11 |
url: '', |
12 |
13 |
// name for the form submit |
14 |
filesName: 'files', |
15 |
16 |
// margin added if needed |
17 |
margin: 0, |
18 |
19 |
// border property |
20 |
border: '2px dashed #ccc', |
21 |
background: '', |
22 |
23 |
// Z index of element |
24 |
zIndex: 100, |
25 |
26 |
// text color |
27 |
textColor: '#ccc', |
28 |
29 |
// css style for text-align |
30 |
textAlign: 'center', |
31 |
32 |
// text inside the div |
33 |
text: 'Drop files here to upload', |
34 |
35 |
// upload all files at once or upload single files, options: all or single |
36 |
uploadMode: 'single', |
37 |
38 |
// progress selector if null one will be created |
39 |
progressContainer: '', |
40 |
41 |
// if preview true we can define the image src |
42 |
src: '', |
43 |
44 |
// wrap the dropzone div with custom class |
45 |
dropzoneWraper: 'nniicc-dropzoneParent', |
46 |
47 |
// Access to the files that are droped |
48 |
files: [], |
49 |
50 |
// max file size ['bytes', 'KB', 'MB', 'GB', 'TB'] |
51 |
maxFileSize: '5MB', |
52 |
53 |
// allowed files to be uploaded seperated by ',' jpg,png,gif |
54 |
allowedFileTypes: '*', |
55 |
56 |
// click on dropzone to select files old way |
57 |
clickToUpload: true, |
58 |
59 |
// show time that has elapsed from the start of the upload, |
60 |
showTimer: false, |
61 |
62 |
// delete complete progress bars when adding new files |
63 |
removeComplete: true, |
64 |
65 |
// if enabled it will load the pictured directly to the html |
66 |
preview: false, |
67 |
68 |
// Upload file even if the preview is enabled |
69 |
uploadOnPreview: false, |
70 |
71 |
// Upload file right after drop |
72 |
uploadOnDrop: true, |
73 |
74 |
// object of additional params |
75 |
params: {}, |
5. Callback functions.
01 |
// callback when the div is loaded |
02 |
load: null, |
03 |
04 |
// callback for the files procent |
05 |
progress: null, |
06 |
07 |
// callback for the file upload finished |
08 |
uploadDone: null, |
09 |
10 |
// callback for a file uploaded |
11 |
success: null, |
12 |
13 |
// callback for any error |
14 |
error: null, |
15 |
16 |
// callback for the preview is rendered |
17 |
previewDone: null, |
18 |
19 |
// callback for mouseover event |
20 |
mouseOver: null, |
