157 lines
5.6 KiB
JavaScript
157 lines
5.6 KiB
JavaScript
(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);
|