Simple XHR Uploader
Queued file upload plugin for jQuery.
Requirements
- jQuery (tested with 1.9.1)
- FormData and XMLHttpRequest on browser
Usage
<input type="file" name="photo" id="photo" data-url="upload.php" />
<div id="browse" data-multiple="1"></div>
<script type="text/javascript">
// Simple usage
$("#photo").uploader();
// Passing some options
$("#browse").uploader({
url: "upload.php",
multiple: false, // Overwrite "data-multiple" attribute
progress: function(loaded, total) {
var loadedInPercentage = Math.round(loaded * 100 / total);
console.log(loadedInPercentage + "%")
},
xhr: { // For each XHR on the queue
start: function() {
console.log("New progress has started");
}
}
});
</script>Options
| Name | Type | Default | Description |
|---|---|---|---|
| name | String | "file" | Input name |
| url | String | Required | Server to post |
| multiple | Boolean | false | Allows multiple file selection on file browser |
| accept | Array | null | Accepted file types |
| defaultProgressBar | Boolean | true | Initialize the default progress bar |
| data | Object | null | Extra data to send to server |
| start | Function | null | "On start" event handler |
| progress | Function | null | "On progress" event handler |
| complete | Function | null | "On complete" event handler |
| xhr.before | Function | null | Each request's "On before" event handler |
| xhr.start | Function | null | Each request's "On start" event handler |
| xhr.progress | Function | null | Each request's "On progress" event handler |
| xhr.success | Function | null | Each request's "On success" event handler |
| xhr.complete | Function | null | Each request's "On complete" event handler |
| xhr.error | Function | null | Each request's "On error" event handler |
License
MIT
