Skip to content

Instantly share code, notes, and snippets.

@jorinvo
Created August 7, 2012 09:00
Show Gist options
  • Save jorinvo/3283514 to your computer and use it in GitHub Desktop.
Save jorinvo/3283514 to your computer and use it in GitHub Desktop.
jQuery html5 uploader
(function ($) {
$.fn.html5Uploader = function (options) {
var crlf = '\r\n';
var boundary = "iloveigloo";
var dashes = "--";
var settings = {
"name": "uploadedFile",
"postUrl": "Upload.aspx",
"onClientAbort": null,
"onClientError": null,
"onClientLoad": null,
"onClientLoadEnd": null,
"onClientLoadStart": null,
"onClientProgress": null,
"onServerAbort": null,
"onServerError": null,
"onServerLoad": null,
"onServerLoadStart": null,
"onServerProgress": null,
"onServerReadyStateChange": null,
"onSuccess": null
};
if (options) {
$.extend(settings, options);
}
return this.each(function (options) {
var $this = $(this);
if ($this.is("[type='file']")) {
$this
.bind("change", function () {
var files = this.files;
for (var i = 0; i < files.length; i++) {
fileHandler(files[i]);
}
});
} else {
$this
.bind("dragenter dragover", function () {
$(this).addClass("hover");
return false;
})
.bind("dragleave", function () {
$(this).removeClass("hover");
return false;
})
.bind("drop", function (e) {
$(this).removeClass("hover");
var files = e.originalEvent.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
fileHandler(files[i]);
}
return false;
});
}
});
function fileHandler(file) {
var fileReader = new FileReader();
fileReader.onabort = function (e) {
if (settings.onClientAbort) {
settings.onClientAbort(e, file);
}
};
fileReader.onerror = function (e) {
if (settings.onClientError) {
settings.onClientError(e, file);
}
};
fileReader.onload = function (e) {
if (settings.onClientLoad) {
settings.onClientLoad(e, file);
}
};
fileReader.onloadend = function (e) {
if (settings.onClientLoadEnd) {
settings.onClientLoadEnd(e, file);
}
};
fileReader.onloadstart = function (e) {
if (settings.onClientLoadStart) {
settings.onClientLoadStart(e, file);
}
};
fileReader.onprogress = function (e) {
if (settings.onClientProgress) {
settings.onClientProgress(e, file);
}
};
fileReader.readAsDataURL(file);
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.upload.onabort = function (e) {
if (settings.onServerAbort) {
settings.onServerAbort(e, file);
}
};
xmlHttpRequest.upload.onerror = function (e) {
if (settings.onServerError) {
settings.onServerError(e, file);
}
};
xmlHttpRequest.upload.onload = function (e) {
if (settings.onServerLoad) {
settings.onServerLoad(e, file);
}
};
xmlHttpRequest.upload.onloadstart = function (e) {
if (settings.onServerLoadStart) {
settings.onServerLoadStart(e, file);
}
};
xmlHttpRequest.upload.onprogress = function (e) {
if (settings.onServerProgress) {
settings.onServerProgress(e, file);
}
};
xmlHttpRequest.onreadystatechange = function (e) {
if (settings.onServerReadyStateChange) {
settings.onServerReadyStateChange(e, file, xmlHttpRequest.readyState);
}
if (settings.onSuccess && xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
settings.onSuccess(e, file, xmlHttpRequest.responseText);
}
};
xmlHttpRequest.open("POST", settings.postUrl, true);
if (file.getAsBinary) { // Firefox
var data = dashes + boundary + crlf +
"Content-Disposition: form-data;" +
"name=\"" + settings.name + "\";" +
"filename=\"" + unescape(encodeURIComponent(file.name)) + "\"" + crlf +
"Content-Type: application/octet-stream" + crlf + crlf +
file.getAsBinary() + crlf +
dashes + boundary + dashes;
xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);
xmlHttpRequest.sendAsBinary(data);
} else if (window.FormData) { // Chrome
var formData = new FormData();
formData.append(settings.name, file);
xmlHttpRequest.send(formData);
}
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment