upload.html
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <script type='text/javascript' src='swfupload.js'></script>
5 <link href="default.css" rel="stylesheet" type="text/css" />
6 <script type="text/javascript" src="js/fileprogress.js"></script>
7 <script type="text/javascript" src="js/handlers.js"></script>
8 </head>
9 <body>
10 <div id="divSWFUploadUI" style="margin-top: 20px;">
11 <div class="fieldset flash" id="fsUploadProgress">
12 <span class="legend">Upload Queue</span>
13 </div>
14 <div id="SWFUploads">
15 <p>
16 <span id="SWFUpload"></span>
17 <input id="btnCancel" type="button" value="Cancel All Uploads" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
18 <br />
19 </p>
20 </div>
21 <div>
22 <div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
23 SWFUpload is loading. Please wait a moment...
24 </div>
25 <div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
26 SWFUpload is taking a long time to load or the load has failed. Please make sure that the Flash Plugin is enabled and that a working version of the Adobe Flash Player is installed.
27 </div>
28 <div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
29 We're sorry. SWFUpload could not load. You may need to install or upgrade Flash Player.
30 Visit the <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe website</a> to get the Flash Player.
31 </div>
32
33 <script type='text/javascript'>
34 var swf;
35 var settings={
36 upload_url:'upload.php',
37 flash_url : "swfupload.swf",
38 post_params: {
39 "PHPSESSID" : "NONE",
40 "HELLO-WORLD" : "Here I Am",
41 ".what" : "OKAY"
42 },
43 file_size_limit : "1000 MB",
44 file_types : "*.mp4",
45 file_upload_limit : 1000,
46 file_queue_limit : 0,
47 custom_settings : {
48 progressTarget : "fsUploadProgress",
49 cancelButtonId : "btnCancel"
50 },
51 debug: false,
52
53 // Button Settings
54 button_image_url : "XPButtonUploadText_61x22.png",
55 button_placeholder_id : "SWFUpload",
56 button_width: 61,
57 button_height: 22,
58
59 // The event handler functions are defined in handlers.js
60 swfupload_preload_handler : swfUploadPreLoad,
61 swfupload_load_failed_handler : swfUploadLoadFailed,
62 swfupload_loaded_handler : swfUploadLoaded,
63 file_queued_handler : fileQueued,
64 file_queue_error_handler : fileQueueError,
65 file_dialog_complete_handler : fileDialogComplete,
66 upload_start_handler : uploadStart,
67 upload_progress_handler : uploadProgress,
68 upload_error_handler : uploadError,
69 upload_success_handler : uploadSuccess,
70 upload_complete_handler : uploadComplete,
71 queue_complete_handler : queueComplete // Queue plugin event
72
73 };
74
75 swf= new SWFUpload (settings);
76 </script>
77 </body>
78 </html>
upload.html
![]()
1 /* Demo Note: This demo uses a FileProgress class that handles the UI for displaying the file name and percent complete.
2 The FileProgress class is not part of SWFUpload.
3 */
4
5
6 /* **********************
7 Event Handlers
8 These are my custom event handlers to make my
9 web application behave the way I went when SWFUpload
10 completes different tasks. These aren't part of the SWFUpload
11 package. They are part of my application. Without these none
12 of the actions SWFUpload makes will show up in my application.
13 ********************** */
14
15 function swfUploadPreLoad() {
16 var self = this;
17 var loading = function () {
18 //document.getElementById("divSWFUploadUI").style.display = "none";
19 document.getElementById("divLoadingContent").style.display = "";
20
21 var longLoad = function () {
22 document.getElementById("divLoadingContent").style.display = "none";
23 document.getElementById("divLongLoading").style.display = "";
24 };
25 this.customSettings.loadingTimeout = setTimeout(function () {
26 longLoad.call(self)
27 },
28 15 * 1000
29 );
30 };
31
32 this.customSettings.loadingTimeout = setTimeout(function () {
33 loading.call(self);
34 },
35 1*1000
36 );
37 }
38 function swfUploadLoaded() {
39 var self = this;
40 clearTimeout(this.customSettings.loadingTimeout);
41 //document.getElementById("divSWFUploadUI").style.visibility = "visible";
42 //document.getElementById("divSWFUploadUI").style.display = "block";
43 document.getElementById("divLoadingContent").style.display = "none";
44 document.getElementById("divLongLoading").style.display = "none";
45 document.getElementById("divAlternateContent").style.display = "none";
46
47 //document.getElementById("btnBrowse").onclick = function () { self.selectFiles(); };
48 document.getElementById("btnCancel").onclick = function () { self.cancelQueue(); };
49 }
50
51 function swfUploadLoadFailed() {
52 clearTimeout(this.customSettings.loadingTimeout);
53 //document.getElementById("divSWFUploadUI").style.display = "none";
54 document.getElementById("divLoadingContent").style.display = "none";
55 document.getElementById("divLongLoading").style.display = "none";
56 document.getElementById("divAlternateContent").style.display = "";
57 }
58
59
60 function fileQueued(file) {
61 try {
62 var progress = new FileProgress(file, this.customSettings.progressTarget);
63 progress.setStatus("Pending...");
64 progress.toggleCancel(true, this);
65
66 } catch (ex) {
67 this.debug(ex);
68 }
69
70 }
71
72 function fileQueueError(file, errorCode, message) {
73 try {
74 if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
75 alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
76 return;
77 }
78
79 var progress = new FileProgress(file, this.customSettings.progressTarget);
80 progress.setError();
81 progress.toggleCancel(false);
82
83 switch (errorCode) {
84 case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
85 progress.setStatus("File is too big.");
86 this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
87 break;
88 case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
89 progress.setStatus("Cannot upload Zero Byte files.");
90 this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
91 break;
92 case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
93 progress.setStatus("Invalid File Type.");
94 this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
95 break;
96 default:
97 if (file !== null) {
98 progress.setStatus("Unhandled Error");
99 }
100 this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
101 break;
102 }
103 } catch (ex) {
104 this.debug(ex);
105 }
106 }
107
108 function fileDialogComplete(numFilesSelected, numFilesQueued) {
109 try {
110 if (numFilesSelected > 0) {
111 document.getElementById(this.customSettings.cancelButtonId).disabled = false;
112 }
113
114 /* I want auto start the upload and I can do that here */
115 this.startUpload();
116 } catch (ex) {
117 this.debug(ex);
118 }
119 }
120
121 function uploadStart(file) {
122 try {
123 /* I don't want to do any file validation or anything, I'll just update the UI and
124 return true to indicate that the upload should start.
125 It's important to update the UI here because in Linux no uploadProgress events are called. The best
126 we can do is say we are uploading.
127 */
128 var progress = new FileProgress(file, this.customSettings.progressTarget);
129 progress.setStatus("Uploading...");
130 progress.toggleCancel(true, this);
131 }
132 catch (ex) {}
133
134 return true;
135 }
136
137 function uploadProgress(file, bytesLoaded, bytesTotal) {
138 try {
139 var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
140
141 var progress = new FileProgress(file, this.customSettings.progressTarget);
142 progress.setProgress(percent);
143 progress.setStatus("Uploading...");
144 } catch (ex) {
145 this.debug(ex);
146 }
147 }
148
149 function uploadSuccess(file, serverData) {
150 try {
151 var progress = new FileProgress(file, this.customSettings.progressTarget);
152 progress.setComplete();
153 progress.setStatus("Complete.");
154 progress.toggleCancel(false);
155
156 } catch (ex) {
157 this.debug(ex);
158 }
159 }
160
161 function uploadError(file, errorCode, message) {
162 try {
163 var progress = new FileProgress(file, this.customSettings.progressTarget);
164 progress.setError();
165 progress.toggleCancel(false);
166
167 switch (errorCode) {
168 case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
169 progress.setStatus("Upload Error: " + message);
170 this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
171 break;
172 case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
173 progress.setStatus("Upload Failed.");
174 this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
175 break;
176 case SWFUpload.UPLOAD_ERROR.IO_ERROR:
177 progress.setStatus("Server (IO) Error");
178 this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
179 break;
180 case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
181 progress.setStatus("Security Error");
182 this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
183 break;
184 case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
185 progress.setStatus("Upload limit exceeded.");
186 this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
187 break;
188 case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
189 progress.setStatus("Failed Validation. Upload skipped.");
190 this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
191 break;
192 case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
193 // If there aren't any files left (they were all cancelled) disable the cancel button
194 if (this.getStats().files_queued === 0) {
195 document.getElementById(this.customSettings.cancelButtonId).disabled = true;
196 }
197 progress.setStatus("Cancelled");
198 progress.setCancelled();
199 break;
200 case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
201 progress.setStatus("Stopped");
202 break;
203 default:
204 progress.setStatus("Unhandled Error: " + errorCode);
205 this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
206 break;
207 }
208 } catch (ex) {
209 this.debug(ex);
210 }
211 }
212
213 function uploadComplete(file) {
214 if (this.getStats().files_queued === 0) {
215 document.getElementById(this.customSettings.cancelButtonId).disabled = true;
216 }
217 }
218
219 // This event comes from the Queue Plugin
220 function queueComplete(numFilesUploaded) {
221 var status = document.getElementById("divStatus");
222 status.innerHTML = numFilesUploaded + " file" + (numFilesUploaded === 1 ? "" : "s") + " uploaded.";
223 }