upload.html
1 2 3 4 5 6 7 8 9 101112 Upload Queue1314152116 17 18
19 2022 25 28 32 33 77 78
upload.php
1
handler.js
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 and124 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 best126 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 button194 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 Plugin220 function queueComplete(numFilesUploaded) {221 var status = document.getElementById("divStatus");222 status.innerHTML = numFilesUploaded + " file" + (numFilesUploaded === 1 ? "" : "s") + " uploaded.";223 }
jsProgress.js
1 /* 2 A simple class for displaying file information and progress 3 Note: This is a demonstration only and not part of SWFUpload. 4 Note: Some have had problems adapting this class in IE7. It may not be suitable for your application. 5 */ 6 7 // Constructor 8 // file is a SWFUpload file object 9 // targetID is the HTML element id attribute that the FileProgress HTML structure will be added to. 10 // Instantiating a new FileProgress object with an existing file will reuse/update the existing DOM elements 11 function FileProgress(file, targetID) { 12 this.fileProgressID = file.id; 13 14 this.opacity = 100; 15 this.height = 0; 16 17 18 this.fileProgressWrapper = document.getElementById(this.fileProgressID); 19 if (!this.fileProgressWrapper) { 20 this.fileProgressWrapper = document.createElement("div"); 21 this.fileProgressWrapper.className = "progressWrapper"; 22 this.fileProgressWrapper.id = this.fileProgressID; 23 24 this.fileProgressElement = document.createElement("div"); 25 this.fileProgressElement.className = "progressContainer"; 26 27 var progressCancel = document.createElement("a"); 28 progressCancel.className = "progressCancel"; 29 progressCancel.href = "#"; 30 progressCancel.style.visibility = "hidden"; 31 progressCancel.appendChild(document.createTextNode(" ")); 32 33 var progressText = document.createElement("div"); 34 progressText.className = "progressName"; 35 progressText.appendChild(document.createTextNode(file.name)); 36 37 var progressBar = document.createElement("div"); 38 progressBar.className = "progressBarInProgress"; 39 40 var progressStatus = document.createElement("div"); 41 progressStatus.className = "progressBarStatus"; 42 progressStatus.innerHTML = " "; 43 44 this.fileProgressElement.appendChild(progressCancel); 45 this.fileProgressElement.appendChild(progressText); 46 this.fileProgressElement.appendChild(progressStatus); 47 this.fileProgressElement.appendChild(progressBar); 48 49 this.fileProgressWrapper.appendChild(this.fileProgressElement); 50 51 document.getElementById(targetID).appendChild(this.fileProgressWrapper); 52 } else { 53 this.fileProgressElement = this.fileProgressWrapper.firstChild; 54 this.reset(); 55 } 56 57 this.height = this.fileProgressWrapper.offsetHeight; 58 this.setTimer(null); 59 60 61 } 62 63 FileProgress.prototype.setTimer = function (timer) { 64 this.fileProgressElement["FP_TIMER"] = timer; 65 }; 66 FileProgress.prototype.getTimer = function (timer) { 67 return this.fileProgressElement["FP_TIMER"] || null; 68 }; 69 70 FileProgress.prototype.reset = function () { 71 this.fileProgressElement.className = "progressContainer"; 72 73 this.fileProgressElement.childNodes[2].innerHTML = " "; 74 this.fileProgressElement.childNodes[2].className = "progressBarStatus"; 75 76 this.fileProgressElement.childNodes[3].className = "progressBarInProgress"; 77 this.fileProgressElement.childNodes[3].style.width = "0%"; 78 79 this.appear(); 80 }; 81 82 FileProgress.prototype.setProgress = function (percentage) { 83 this.fileProgressElement.className = "progressContainer green"; 84 this.fileProgressElement.childNodes[3].className = "progressBarInProgress"; 85 this.fileProgressElement.childNodes[3].style.width = percentage + "%"; 86 87 this.appear(); 88 }; 89 FileProgress.prototype.setComplete = function () { 90 this.fileProgressElement.className = "progressContainer blue"; 91 this.fileProgressElement.childNodes[3].className = "progressBarComplete"; 92 this.fileProgressElement.childNodes[3].style.width = ""; 93 94 var oSelf = this; 95 this.setTimer(setTimeout(function () { 96 oSelf.disappear(); 97 }, 10000)); 98 }; 99 FileProgress.prototype.setError = function () {100 this.fileProgressElement.className = "progressContainer red";101 this.fileProgressElement.childNodes[3].className = "progressBarError";102 this.fileProgressElement.childNodes[3].style.width = "";103 104 var oSelf = this;105 this.setTimer(setTimeout(function () {106 oSelf.disappear();107 }, 5000));108 };109 FileProgress.prototype.setCancelled = function () {110 this.fileProgressElement.className = "progressContainer";111 this.fileProgressElement.childNodes[3].className = "progressBarError";112 this.fileProgressElement.childNodes[3].style.width = "";113 114 var oSelf = this;115 this.setTimer(setTimeout(function () {116 oSelf.disappear();117 }, 2000));118 };119 FileProgress.prototype.setStatus = function (status) {120 this.fileProgressElement.childNodes[2].innerHTML = status;121 };122 123 // Show/Hide the cancel button124 FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {125 this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";126 if (swfUploadInstance) {127 var fileID = this.fileProgressID;128 this.fileProgressElement.childNodes[0].onclick = function () {129 swfUploadInstance.cancelUpload(fileID);130 return false;131 };132 }133 };134 135 FileProgress.prototype.appear = function () {136 if (this.getTimer() !== null) {137 clearTimeout(this.getTimer());138 this.setTimer(null);139 }140 141 if (this.fileProgressWrapper.filters) {142 try {143 this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;144 } catch (e) {145 // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.146 this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";147 }148 } else {149 this.fileProgressWrapper.style.opacity = 1;150 }151 152 this.fileProgressWrapper.style.height = "";153 154 this.height = this.fileProgressWrapper.offsetHeight;155 this.opacity = 100;156 this.fileProgressWrapper.style.display = "";157 158 };159 160 // Fades out and clips away the FileProgress box.161 FileProgress.prototype.disappear = function () {162 163 var reduceOpacityBy = 15;164 var reduceHeightBy = 4;165 var rate = 30; // 15 fps166 167 if (this.opacity > 0) {168 this.opacity -= reduceOpacityBy;169 if (this.opacity < 0) {170 this.opacity = 0;171 }172 173 if (this.fileProgressWrapper.filters) {174 try {175 this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;176 } catch (e) {177 // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.178 this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";179 }180 } else {181 this.fileProgressWrapper.style.opacity = this.opacity / 100;182 }183 }184 185 if (this.height > 0) {186 this.height -= reduceHeightBy;187 if (this.height < 0) {188 this.height = 0;189 }190 191 this.fileProgressWrapper.style.height = this.height + "px";192 }193 194 if (this.height > 0 || this.opacity > 0) {195 var oSelf = this;196 this.setTimer(setTimeout(function () {197 oSelf.disappear();198 }, rate));199 } else {200 this.fileProgressWrapper.style.display = "none";201 this.setTimer(null);202 }203 };
defalut.css
1 /* ----------------------------------------------- 2 www.swfupload.org 3 Description: Common Screen Stylesheet for SWFUpload Demos 4 Updated on: May 1, 2008 5 ----------------------------------------------- */ 6 7 8 /* ----------------------------------------------- 9 GLOBAL RESET 10 ----------------------------------------------- */ 11 12 html, body, div, span, applet, object, iframe, 13 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 14 a, abbr, acronym, address, big, cite, code, 15 del, dfn, font, img, ins, kbd, q, s, samp, 16 small, strike, strong, sub, sup, tt, var, 17 dl, dt, dd, ol, ul, li, 18 fieldset, form, label, legend, 19 table, caption, tbody, tfoot, thead, tr, th, td { 20 margin: 0; 21 padding: 0; 22 border: 0; 23 outline: 0; 24 font-weight: inherit; 25 font-style: inherit; 26 font-size: 100%; 27 font-family: inherit; 28 vertical-align: baseline; 29 } 30 31 /* remember to define focus styles! */ 32 :focus { outline: 0; } 33 body { 34 line-height: 1; 35 color: black; 36 background: white; 37 } 38 ol, ul { 39 list-style: none; 40 } 41 /* tables still need 'cellspacing="0"' in the markup */ 42 table { 43 border-collapse: separate; 44 border-spacing: 0; 45 } 46 caption, th, td { 47 text-align: left; 48 font-weight: normal; 49 } 50 blockquote:before, blockquote:after, 51 q:before, q:after { 52 content: ""; 53 } 54 blockquote, q { 55 quotes: "" ""; 56 } 57 58 59 /* ----------------------------------------------- 60 BASIC ELEMENTS 61 ----------------------------------------------- */ 62 63 64 /* -- Text Styles ------------------------------- */ 65 html, 66 body { 67 margin: 0; 68 padding: 0; 69 width: 100%; 70 font: 12px/1.4em Helvetica, Arial, sans-serif; 71 } 72 73 a { 74 color: #385ea2; 75 text-decoration: none; 76 } 77 a:hover { text-decoration: underline; } 78 79 strong { font-weight: 700; } 80 81 h1 { 82 font: 28px/1em Arial, Helvetica, sans-serif; 83 padding: 60px 20px 20px; 84 margin-bottom: 15px; 85 color: #333; 86 text-decoration: none; 87 } 88 89 h1 a{ 90 color: #fff; 91 text-decoration: none; 92 } 93 94 h2 { 95 font-size: 22px; 96 font-weight: 300; 97 padding-top: 1em; 98 padding-bottom: .25em; 99 }100 101 102 p { 103 margin-top: .25em;104 margin-bottom: .5em;105 }106 107 ul { padding: 4px 5px; }108 ul li { 109 padding: 4px 5px; 110 margin: 0 20px;111 list-style:square; 112 }113 114 code {115 display: block;116 background:#edffb8 none repeat scroll 0%;117 border-color:#b2da3a;118 border-style:solid;119 border-width:1px 0;120 font-size: 1em;121 margin: 1em 0pt;122 overflow:auto;123 padding: 0.3em 0.4em;124 white-space:pre;125 }126 127 /* -- Layout ------------------------------- */128 129 130 #header {131 background: #313131 url(../images/header-bg.jpg) repeat-x top left;132 height: 125px;133 position: relative;134 }135 #logo { 136 padding: 0;137 margin: 0;138 background: url(../images/logo.gif) no-repeat 20px 20px;139 height: 106px;140 width: 272px;141 text-indent: -5000px;142 overflow: hidden;143 }144 /* hide link text */145 #logo a {146 display: block;147 color: #fff;148 text-indent: -5000px;149 overflow: hidden;150 height: 106px;151 width: 272px;152 }153 154 #version {155 color: #fff;156 position: absolute;157 right: 20px;158 top: 85px;159 }160 161 162 #content { width: 680px;}163 #content { margin: 20px 90px; }164 165 166 167 168 /* -- Form Styles ------------------------------- */169 form { 170 margin: 0;171 padding: 0;172 }173 174 175 176 div.fieldset {177 border: 1px solid #afe14c;178 margin: 10px 0;179 padding: 20px 10px;180 }181 div.fieldset span.legend {182 position: relative;183 background-color: #FFF;184 padding: 3px;185 top: -30px;186 font: 700 14px Arial, Helvetica, sans-serif;187 color: #73b304;188 }189 190 div.flash {191 width: 375px;192 margin: 10px 5px;193 border-color: #D9E4FF;194 195 -moz-border-radius-topleft : 5px;196 -webkit-border-top-left-radius : 5px;197 -moz-border-radius-topright : 5px;198 -webkit-border-top-right-radius : 5px;199 -moz-border-radius-bottomleft : 5px;200 -webkit-border-bottom-left-radius : 5px;201 -moz-border-radius-bottomright : 5px;202 -webkit-border-bottom-right-radius : 5px;203 204 }205 206 button,207 input,208 select,209 textarea { 210 border-width: 1px; 211 margin-bottom: 10px;212 padding: 2px 3px;213 }214 215 216 217 input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */218 219 220 label { 221 width: 150px; 222 text-align: right; 223 display:block;224 margin-right: 5px;225 }226 227 #btnSubmit { margin: 0 0 0 155px ; }228 229 /* -- Table Styles ------------------------------- */230 td {231 font: 10pt Helvetica, Arial, sans-serif;232 vertical-align: top;233 }234 235 .progressWrapper {236 width: 357px;237 overflow: hidden;238 }239 240 .progressContainer {241 margin: 5px;242 padding: 4px;243 border: solid 1px #E8E8E8;244 background-color: #F7F7F7;245 overflow: hidden;246 }247 /* Message */248 .message {249 margin: 1em 0;250 padding: 10px 20px;251 border: solid 1px #FFDD99;252 background-color: #FFFFCC;253 overflow: hidden;254 }255 /* Error */256 .red {257 border: solid 1px #B50000;258 background-color: #FFEBEB;259 }260 261 /* Current */262 .green {263 border: solid 1px #DDF0DD;264 background-color: #EBFFEB;265 }266 267 /* Complete */268 .blue {269 border: solid 1px #CEE2F2;270 background-color: #F0F5FF;271 }272 273 .progressName {274 font-size: 8pt;275 font-weight: 700;276 color: #555;277 width: 323px;278 height: 14px;279 text-align: left;280 white-space: nowrap;281 overflow: hidden;282 }283 284 .progressBarInProgress,285 .progressBarComplete,286 .progressBarError {287 font-size: 0;288 width: 0%;289 height: 2px;290 background-color: blue;291 margin-top: 2px;292 }293 294 .progressBarComplete {295 width: 100%;296 background-color: green;297 visibility: hidden;298 }299 300 .progressBarError {301 width: 100%;302 background-color: red;303 visibility: hidden;304 }305 306 .progressBarStatus {307 margin-top: 2px;308 width: 337px;309 font-size: 7pt;310 font-family: Arial;311 text-align: left;312 white-space: nowrap;313 }314 315 a.progressCancel {316 font-size: 0;317 display: block;318 height: 14px;319 width: 14px;320 background-image: url(../images/cancelbutton.gif);321 background-repeat: no-repeat;322 background-position: -14px 0px;323 float: right;324 }325 326 a.progressCancel:hover {327 background-position: 0px 0px;328 }329 330 331 /* -- SWFUpload Object Styles ------------------------------- */332 .swfupload {333 vertical-align: top;334 }