AXUPLOADER 2.0
What is this?
AXUPLOADER is a jQuery javascript plugin for creating a simple multiupload file system. It is based only on javascript and supports html5 uploading but also is compatible with html4. No flash, no silverlight, only javascript.
axuploader is applied to any container tag (div, span, p) and all file inputs, forms and buttons are automatically created by the plugin. The upload server side script is written in php, but it can be adapted in all server side languages.
Featues
- Multi file upload on all browsers
- Multi file select on html5 browsers (not IE)
- Upload progress information on html5 browsers
- File size information on html5 browsers
- No flash, no silverlight, on other plugins, only Javascript
- Support IE 6+, Firefox 2+, Safari 2+, Chrome 1+
- Upload files by chunk, for more performance
- Not dependent by server max post size and max upload file size limits
Download axuploader 2.0
Download full source, includes php file and minifield javascript here.
How to use?
- Load jQuery, axuploader javascript files:
<script src="jslibs/jquery.js" type="text/javascript"></script> <script src="jslibs/axuploader.js" type="text/javascript"></script>
- Now just apply axuploader to any container prepared in the wanted position, indicating the path of the php script that does the
upload process
$('#anydiv').axuploader({ 'url':'upload.php', 'remotePath':'uploaded/' }); - On server put the upload.php file in the path indicated by the url option of the plugin.
- In the options of the plugin can be specified allowed extensions, remote path where to upload files and events.
Options:
| Option | Type | Default | Description |
|---|---|---|---|
| remotePath | String, Function | '' | If given as string specify the remote path where to upload the file. In given as function must return the remote upload path. This function is excecuted on the start upload event, so the upload path is calculated when Upload button is pressed. |
| url | String | upload.php | The url for the upload script server side. On the url can be specified more data in GET |
| data | String, Function | '' | If given as string is used for sending additional parameters in GET to the php script. If given as function must return a url formated string. This function is excecuted on the start upload event, so the upload path is calculated when Upload button is pressed. |
| async | Boolean | true | If true file uploads are made asyncronyos in parallel. If false files are uploaded one by one. Default to false for not html5 browsers |
| maxFiles | Int | 999 | Max number of files that can be uploaded at once. |
| allowExt | array | ['all'] | An array containing the type of file extension that can be uploaded. |
| showSize | string/Enum | Mb | Show size of file in MB, Kb, Gb, or byte. |
| success | Function(String responseText,String fileName) | null | A function that is called every time a file is uploaded successfully. Return response text and the file name uploaded. |
| finish | Function(String responseText,Array filesName) | null | This function is called when all files finish uploading. Returns responseText and an array with the file names. |
| error | Function(Event e) | null | Function that is trigger when there is an error on uploading file. Returns error event. |
| GIFprogress | String | '' | An animated gif to be used as upload progress on browsers that do not support html5 upload. |
| enable | Boolean | true | If set to false plugin start in disabled mode, in case one want to active upload later under certain conditions. |
| chunkSize | Int | 1024*1024 | When uploading big files with html5 for perfomance reason is better to upload files by chunks (peices). With this option set the size of chunk to upload. Defaul is 1Mb. Avaiable only for browsers that support slice File Api. |
Methods:
| Method | Description | Example |
|---|---|---|
| destroy | Destroys the axuploader. | $('.demo').axuploader('destroy') |
| option | Set or get the options of the axuploader. | getter: $('.demo').axuploader('option',allowExt) setter:$('.demo').axuploader('option',allowExt,['jpg','gif']) |
| enable | Enable the plugin the axuploader plugin if it has been disabled. | $('.demo').axuploader('enable') |
| disable | Disables the plugin. | $('.demo').axuploader('disable') |
| start | It triggers the upload start event.A function to call for starting upload from other points of code, ie: on some extrenal button click. | $('.demo').axuploader('start') starts uploading of selected files. |
| clear | It triggers the clear event.A function to call for starting upload from other points of code, ie: on some extrenal button click. | $('.demo').axuploader('clear') clear the list of selected files. |
Examples
| Minimal demo | Setup code |
|---|---|
<div id="demo1"></div>
$('#demo1').axuploader({
url:'upload.php'
});
|
| Demo with data, and other settings | Setup code |
|---|---|
<div id="demo2"></div>
$('#demo2').axuploader({
url:'upload.php?another=someval',
data:'file_id=10&user=123',
maxFiles:5,
allowExt:['jpg','gif'],
onFinish:function(txt,files){
alert('All files uploaded server return:'+txt);
}
});
|
CSS styling the plugin
Basic plugin has not style, css applied (since I am not a good designer). But I have assigned to all tables, inputs, and td elements a class to be identify and to be style via css:
- [Upload All] button has class ax-uploadall
- [Clear] class is ax-clear
- The list table of files has class ax-file-list
- File name TD class is ax-file-name
- Size TD class is ax-size-td
- Progress TD class is ax-progress-td, and inside DIV has ax-progress-div
- Remove TD class is ax-remove-td
- Upload TD class is ax-upload-td, and inside button has ax-upload
Let your comment here
For suggestions, issues, feel free to contact me at: albanx[at]gmail.com. ([at]=@)