3 $.fn
.html5Uploader = function (options
) {
6 var boundary
= "iloveigloo";
10 "name": "uploadedFile",
11 "postUrl": "Upload.aspx",
12 "onClientAbort": null,
13 "onClientError": null,
15 "onClientLoadEnd": null,
16 "onClientLoadStart": null,
17 "onClientProgress": null,
18 "onServerAbort": null,
19 "onServerError": null,
21 "onServerLoadStart": null,
22 "onServerProgress": null,
23 "onServerReadyStateChange": null,
28 $.extend(settings
, options
);
31 return this.each(function (options
) {
33 if ($this.is("[type='file']")) {
35 .bind("change", function () {
36 var files
= this.files
;
37 for (var i
= 0; i
< files
.length
; i
++) {
38 fileHandler(files
[i
]);
43 .bind("dragenter dragover", function () {
44 $(this).addClass("hover");
47 .bind("dragleave", function () {
48 $(this).removeClass("hover");
51 .bind("drop", function (e
) {
52 $(this).removeClass("hover");
53 var files
= e
.originalEvent
.dataTransfer
.files
;
54 for (var i
= 0; i
< files
.length
; i
++) {
55 fileHandler(files
[i
]);
62 function fileHandler(file
) {
63 var fileReader
= new FileReader();
64 fileReader
.onabort = function (e
) {
65 if (settings
.onClientAbort
) {
66 settings
.onClientAbort(e
, file
);
69 fileReader
.onerror = function (e
) {
70 if (settings
.onClientError
) {
71 settings
.onClientError(e
, file
);
74 fileReader
.onload = function (e
) {
75 if (settings
.onClientLoad
) {
76 settings
.onClientLoad(e
, file
);
79 fileReader
.onloadend = function (e
) {
80 if (settings
.onClientLoadEnd
) {
81 settings
.onClientLoadEnd(e
, file
);
84 fileReader
.onloadstart = function (e
) {
85 if (settings
.onClientLoadStart
) {
86 settings
.onClientLoadStart(e
, file
);
89 fileReader
.onprogress = function (e
) {
90 if (settings
.onClientProgress
) {
91 settings
.onClientProgress(e
, file
);
94 fileReader
.readAsDataURL(file
);
96 var xmlHttpRequest
= new XMLHttpRequest();
97 xmlHttpRequest
.upload
.onabort = function (e
) {
98 if (settings
.onServerAbort
) {
99 settings
.onServerAbort(e
, file
);
102 xmlHttpRequest
.upload
.onerror = function (e
) {
103 if (settings
.onServerError
) {
104 settings
.onServerError(e
, file
);
107 xmlHttpRequest
.upload
.onload = function (e
) {
108 if (settings
.onServerLoad
) {
109 settings
.onServerLoad(e
, file
);
112 xmlHttpRequest
.upload
.onloadstart = function (e
) {
113 if (settings
.onServerLoadStart
) {
114 settings
.onServerLoadStart(e
, file
);
117 xmlHttpRequest
.upload
.onprogress = function (e
) {
118 if (settings
.onServerProgress
) {
119 settings
.onServerProgress(e
, file
);
122 xmlHttpRequest
.onreadystatechange = function (e
) {
123 if (settings
.onServerReadyStateChange
) {
124 settings
.onServerReadyStateChange(e
, file
, xmlHttpRequest
.readyState
);
126 if (settings
.onSuccess
&& xmlHttpRequest
.readyState
== 4 && xmlHttpRequest
.status
== 200) {
127 settings
.onSuccess(e
, file
, xmlHttpRequest
.responseText
);
130 xmlHttpRequest
.open("POST", settings
.postUrl
, true);
132 if (file
.getAsBinary
) { // Firefox
134 var data
= dashes
+ boundary
+ crlf
+
135 "Content-Disposition: form-data;" +
136 "name=\"" + settings
.name
+ "\";" +
137 "filename=\"" + unescape(encodeURIComponent(file
.name
)) + "\"" + crlf
+
138 "Content-Type: application/octet-stream" + crlf
+ crlf
+
139 file
.getAsBinary() + crlf
+
140 dashes
+ boundary
+ dashes
;
142 xmlHttpRequest
.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary
);
143 xmlHttpRequest
.sendAsBinary(data
);
145 } else if (window
.FormData
) { // Chrome
147 var formData
= new FormData();
148 formData
.append(settings
.name
, file
);
150 xmlHttpRequest
.send(formData
);