This time I will share jQuery Plugin and tutorial about Draggable File Upload Component With jQuery – aksFileUpload.js, hope it will help you in programming stack.
| File Size: | 52.4 KB |
|---|---|
| Views Total: | 1271 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
aksFileUpload.js is a jQuery plugin to help create a nice-looking, drag-and-drop file upload zone that provides an easy to select, preview, and upload files to your server.
Features:
- Single & Multiple file upload.
- File preview before uploading.
- AJAX file upload.
- Validates file size and file type before uploading.
How to use it:
1. To get started, import jQuery library and the aksFileUpload.js plugin’s files into the HTML document.
1 |
<link rel="stylesheet" href="/path/to/dist/aksFileUpload.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/dist/aksFileUpload.min.js"></script> |
2. Add the <aks-file-upload> component to the page.
1 |
<aks-file-upload></aks-file-upload> |
3. Initialize the plugin to create a default file upload zone.
1 |
$(function () { |
2 |
$("aks-file-upload").aksFileUpload({ |
3 |
// options here |
4 |
}); |
5 |
}); |
4. Enable an element to save the data (JSON or Input) of files to be uploaded.
1 |
<p id="uploadfile" type="json"></p> |
1 |
$("aks-file-upload").aksFileUpload({ |
2 |
fileUpload: "#uploadfile" |
3 |
}); |
1 |
// or an input filed |
2 |
$("aks-file-upload").aksFileUpload({ |
3 |
fileUpload: "#uploadInput" |
4 |
}); |
5. Customize the ID for the hidden file input field generated by the plugin.
1 |
$(function () { |
2 |
$("aks-file-upload").aksFileUpload({ |
3 |
input: "#aksfileupload" |
4 |
}); |
5 |
}); |
6. Determine the accepted file types for uploads.
01 |
$("aks-file-upload").aksFileUpload({ |
02 |
fileType: [ |
03 |
"pdf", |
04 |
"docx", |
05 |
"rtf", |
06 |
"jpg", |
07 |
"jpeg", |
08 |
"png", |
09 |
"txt", |
10 |
"mpa", |
11 |
"ogg", |
12 |
"aif", |
13 |
"cda", |
14 |
"mid", |
15 |
"midi", |
16 |
"mp3", |
17 |
"wav", |
18 |
"wma", |
19 |
"wpl", |
20 |
"7z", |
21 |
"arj", |
22 |
"deb", |
23 |
"pkg", |
24 |
"rar", |
25 |
"rpm", |
26 |
"tar.gz", |
27 |
"z", |
28 |
"zip", |
29 |
"csv", |
30 |
"dat", |
31 |
"db", |
32 |
"dbf", |
33 |
"log", |
34 |
"mdb", |
35 |
"sav", |
36 |
"sql", |
37 |
"tar", |
38 |
"xml", |
39 |
"apk", |
40 |
"exe", |
41 |
"jar", |
42 |
"py", |
43 |
"fnt", |
44 |
"fon", |
45 |
"otf", |
46 |
"ttf", |
47 |
"ai", |
48 |
"bmp", |
49 |
"gif", |
50 |
"ico", |
51 |
"jpeg", |
52 |
"jpg", |
53 |
"png", |
54 |
"ps", |
55 |
"psd", |
56 |
"svg", |
57 |
"tif", |
58 |
"tiff", |
59 |
"asp", |
60 |
"aspx", |
61 |
"css", |
62 |
"htm", |
63 |
"html", |
64 |
"js", |
65 |
"jsp", |
66 |
"php", |
67 |
"rss", |
68 |
"pps", |
69 |
"ppt", |
70 |
"pptx", |
71 |
"avi", |
72 |
"flv", |
73 |
"mov", |
74 |
"mp4", |
75 |
"mpg", |
76 |
"mpeg", |
77 |
"vob", |
78 |
"wmv", |
79 |
"doc", |
80 |
"rtf", |
