@fengyuanchen/uploader
v0.1.1File Uploader
A simple jQuery file uploading plugin.
Features
- Supports to upload files without form
- Supports to upload files from a file input inner a form without submit the form
- Supports to upload multiple files
- Supports to upload multiple files one by one
- Supports to upload files with drag and drop
- Supports progress event (will be simulated in IE8/9)
Main
dist/
├── uploader.js (14 KB)
└── uploader.min.js ( 6 KB)
Getting started
Quick start
Three quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/fengyuanchen/uploader.git
. - Install with NPM:
npm install @fengyuanchen/uploader
.
Installation
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/uploader.js"></script>
Usage
Initialize with $.fn.uploader
method.
<input id="file" type="file" name="file" multiple>
$('#file').uploader({
done: function (e, data) {
console.log(e.type); // 'done'
console.log(e.namespace); // 'uploader'
console.log(data); // Response data
}
});
Options
// Set uploader options
$().uploader(options);
// Change the global default options
$.fn.uploader.setDefaults(options);
Note: jQuery.ajax's options are available too.
name
- Type:
String
- Default: The file input's "name" property (or "file" if not set)
A name for submit the files.
url
- Type:
String
- Default: The current page
A string containing the URL to which the request is sent.
data
- Type:
Object
- Default:
null
Add extra parameters to the request.
autoUpload
- Type:
Boolean
- Default:
true
Upload the files automatically when the file input changes.
singleUpload
- Type:
Boolean
- Default:
true
Upload the files one by one when there are multiple files.
dropzone
- Type:
String
(jQuery selector) - Default:
''
Drop file to zone to upload.
upload(event)
- Type:
Function
- Default:
null
A shortcut of the "upload.uploader" event.
$().uploader({
upload: function (e) {
console.log(e.files); // File List
}
})
start(event)
- Type:
Function
- Default:
null
A shortcut of the "start.uploader" event.
$().uploader({
start: function (e) {
console.log(e.type); // start
console.log(e.namespace); // uploader
console.log(e.index); // Index of upload queues
}
})
progress(event)
- Type:
Function
- Default:
null
A shortcut of the "progress.uploader" event.
$().uploader({
progress: function (e) {
console.log(e.lengthComputable);
console.log(e.loaded);
console.log(e.total);
}
})
done(event, data, textStatus)
- Type:
Function
- Default:
null
A shortcut of the "done.uploader" event.
fail(event, textStatus, errorThrown)
- Type:
Function
- Default:
null
A shortcut of the "fail.uploader" event.
end(event, textStatus)
- Type:
Function
- Default:
null
A shortcut of the "end.uploader" event.
uploaded(event)
- Type:
Function
- Default:
null
A shortcut of the "uploaded.uploader" event.
Methods
$().uploader('method')
upload([files])
- files (optional):
- Type:
FileList
- The files to upload, use the file input's "files" property by default.
- Type:
Upload the files manually (You may need to set the autoUpload
option to false
first).
destroy()
Destroy the uploader.
Events
upload.uploader
This event fires when start to upload all files.
start.uploader
This event fires when start to upload files or the first file.
progress.uploader
This event fires when the upload request progress changes.
done.uploader
This event is fired when the upload request succeeds.
fail.uploader
This event is fired when the upload request fails.
end.uploader
This event is fired when the upload request finishes (after done
and fail
events are fired).
uploaded.uploader
This event is fired when all files uploaded.
No conflict
If you have to use other plugin with the same namespace, just call the $.fn.uploader.noConflict
method to revert to it.
<script src="other-plugin.js"></script>
<script src="uploader.js"></script>
<script>
$.fn.uploader.noConflict();
// Code that uses other plugin's "$().uploader" can follow here.
</script>
Browser support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 8+
As a jQuery plugin, you also need to see the jQuery Browser Support.
License
Metadata
- MIT
- Whatever
- Fengyuan Chen
- released 7/13/2016