swfupload 例子

upload.html

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <script type='text/javascript' src='swfupload.js'></script>
     <link href="default.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="js/fileprogress.js"></script>
 <script type="text/javascript" src="js/handlers.js"></script>
     </head>
     <body>
         <div id="divSWFUploadUI" style="margin-top: 20px;">
             <div class="fieldset  flash" id="fsUploadProgress">
             <span class="legend">Upload Queue</span>
             </div>
                 <div id="SWFUploads">
                     <p>
                         <span id="SWFUpload"></span>
                         <input id="btnCancel" type="button" value="Cancel All Uploads" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
                         <br />
                     </p>
                 </div>
         <div>
             <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;">
                 SWFUpload is loading. Please wait a moment...
             </div>
             <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;">
                 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.
             </div>
             <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;">
                 We're sorry.  SWFUpload could not load.  You may need to install or upgrade Flash Player.
                 Visit the <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe website</a> to get the Flash Player.
             </div>

             <script type='text/javascript'>
             var swf;
                 var settings={
                     upload_url:'upload.php',
                     flash_url : "swfupload.swf",
                     post_params: {
             "PHPSESSID" : "NONE",
             "HELLO-WORLD" : "Here I Am",
             ".what" : "OKAY"
         },
         file_size_limit : "1000 MB",
         file_types : "*.mp4",
         file_upload_limit : ,
         file_queue_limit : ,
         custom_settings : {
             progressTarget : "fsUploadProgress",
             cancelButtonId : "btnCancel"
         },
         debug: false,

         // Button Settings
         button_image_url : "XPButtonUploadText_61x22.png",
         button_placeholder_id : "SWFUpload",
         button_width: ,
         button_height: ,

         // The event handler functions are defined in handlers.js
         swfupload_preload_handler : swfUploadPreLoad,
         swfupload_load_failed_handler : swfUploadLoadFailed,
         swfupload_loaded_handler : swfUploadLoaded,
         file_queued_handler : fileQueued,
         file_queue_error_handler : fileQueueError,
         file_dialog_complete_handler : fileDialogComplete,
         upload_start_handler : uploadStart,
         upload_progress_handler : uploadProgress,
         upload_error_handler : uploadError,
         upload_success_handler : uploadSuccess,
         upload_complete_handler : uploadComplete,
         queue_complete_handler : queueComplete    // Queue plugin event

     };

     swf= new SWFUpload (settings);
 </script>
     </body>
 </html>

upload.html

upload.php

 <?php
 if(!is_dir("./files")) mkdir("./files", );
 move_uploaded_file($_FILES['Filedata']['tmp_name'], "./files/".$_FILES['Filedata']['name']);

handler.js

 /* Demo Note:  This demo uses a FileProgress class that handles the UI for displaying the file name and percent complete.
 The FileProgress class is not part of SWFUpload.
 */

 /* **********************
    Event Handlers
    These are my custom event handlers to make my
    web application behave the way I went when SWFUpload
    completes different tasks.  These aren't part of the SWFUpload
    package.  They are part of my application.  Without these none
    of the actions SWFUpload makes will show up in my application.
    ********************** */

 function swfUploadPreLoad() {
     var self = this;
     var loading = function () {
         //document.getElementById("divSWFUploadUI").style.display = "none";
         document.getElementById("divLoadingContent").style.display = "";

         var longLoad = function () {
             document.getElementById("divLoadingContent").style.display = "none";
             document.getElementById("divLongLoading").style.display = "";
         };
         this.customSettings.loadingTimeout = setTimeout(function () {
                 longLoad.call(self)
             },
              *
         );
     };

     this.customSettings.loadingTimeout = setTimeout(function () {
             loading.call(self);
         },
         *
     );
 }
 function swfUploadLoaded() {
     var self = this;
     clearTimeout(this.customSettings.loadingTimeout);
     //document.getElementById("divSWFUploadUI").style.visibility = "visible";
     //document.getElementById("divSWFUploadUI").style.display = "block";
     document.getElementById("divLoadingContent").style.display = "none";
     document.getElementById("divLongLoading").style.display = "none";
     document.getElementById("divAlternateContent").style.display = "none";

     //document.getElementById("btnBrowse").onclick = function () { self.selectFiles(); };
     document.getElementById("btnCancel").onclick = function () { self.cancelQueue(); };
 }

 function swfUploadLoadFailed() {
     clearTimeout(this.customSettings.loadingTimeout);
     //document.getElementById("divSWFUploadUI").style.display = "none";
     document.getElementById("divLoadingContent").style.display = "none";
     document.getElementById("divLongLoading").style.display = "none";
     document.getElementById("divAlternateContent").style.display = "";
 }

 function fileQueued(file) {
     try {
         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setStatus("Pending...");
         progress.toggleCancel(true, this);

     } catch (ex) {
         this.debug(ex);
     }

 }

 function fileQueueError(file, errorCode, message) {
     try {
         if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
             alert("You have attempted to queue too many files.\n" + (message ===  ? "You have reached the upload limit." : "You may select " + (message >  ? "up to " + message + " files." : "one file.")));
             return;
         }

         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setError();
         progress.toggleCancel(false);

         switch (errorCode) {
         case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
             progress.setStatus("File is too big.");
             this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
             progress.setStatus("Cannot upload Zero Byte files.");
             this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
             progress.setStatus("Invalid File Type.");
             this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         default:
             if (file !== null) {
                 progress.setStatus("Unhandled Error");
             }
             this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         }
     } catch (ex) {
         this.debug(ex);
     }
 }

 function fileDialogComplete(numFilesSelected, numFilesQueued) {
     try {
         if (numFilesSelected > ) {
             document.getElementById(this.customSettings.cancelButtonId).disabled = false;
         }

         /* I want auto start the upload and I can do that here */
         this.startUpload();
     } catch (ex)  {
         this.debug(ex);
     }
 }

 function uploadStart(file) {
     try {
         /* I don't want to do any file validation or anything,  I'll just update the UI and
         return true to indicate that the upload should start.
         It's important to update the UI here because in Linux no uploadProgress events are called. The best
         we can do is say we are uploading.
          */
         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setStatus("Uploading...");
         progress.toggleCancel(true, this);
     }
     catch (ex) {}

     return true;
 }

 function uploadProgress(file, bytesLoaded, bytesTotal) {
     try {
         var percent = Math.ceil((bytesLoaded / bytesTotal) * );

         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setProgress(percent);
         progress.setStatus("Uploading...");
     } catch (ex) {
         this.debug(ex);
     }
 }

 function uploadSuccess(file, serverData) {
     try {
         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setComplete();
         progress.setStatus("Complete.");
         progress.toggleCancel(false);

     } catch (ex) {
         this.debug(ex);
     }
 }

 function uploadError(file, errorCode, message) {
     try {
         var progress = new FileProgress(file, this.customSettings.progressTarget);
         progress.setError();
         progress.toggleCancel(false);

         switch (errorCode) {
         case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
             progress.setStatus("Upload Error: " + message);
             this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
             progress.setStatus("Upload Failed.");
             this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.IO_ERROR:
             progress.setStatus("Server (IO) Error");
             this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
             progress.setStatus("Security Error");
             this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
             progress.setStatus("Upload limit exceeded.");
             this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
             progress.setStatus("Failed Validation.  Upload skipped.");
             this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
             // If there aren't any files left (they were all cancelled) disable the cancel button
             if (this.getStats().files_queued === ) {
                 document.getElementById(this.customSettings.cancelButtonId).disabled = true;
             }
             progress.setStatus("Cancelled");
             progress.setCancelled();
             break;
         case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
             progress.setStatus("Stopped");
             break;
         default:
             progress.setStatus("Unhandled Error: " + errorCode);
             this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
             break;
         }
     } catch (ex) {
         this.debug(ex);
     }
 }

 function uploadComplete(file) {
     if (this.getStats().files_queued === ) {
         document.getElementById(this.customSettings.cancelButtonId).disabled = true;
     }
 }

 // This event comes from the Queue Plugin
 function queueComplete(numFilesUploaded) {
     var status = document.getElementById("divStatus");
     status.innerHTML = numFilesUploaded + " file" + (numFilesUploaded ===  ? "" : "s") + " uploaded.";
 }

handler.js

jsProgress.js

 /*
     A simple class for displaying file information and progress
     Note: This is a demonstration only and not part of SWFUpload.
     Note: Some have had problems adapting this class in IE7. It may not be suitable for your application.
 */

 // Constructor
 // file is a SWFUpload file object
 // targetID is the HTML element id attribute that the FileProgress HTML structure will be added to.
 // Instantiating a new FileProgress object with an existing file will reuse/update the existing DOM elements
 function FileProgress(file, targetID) {
     this.fileProgressID = file.id;

     this.opacity = ;
     this.height = ;

     this.fileProgressWrapper = document.getElementById(this.fileProgressID);
     if (!this.fileProgressWrapper) {
         this.fileProgressWrapper = document.createElement("div");
         this.fileProgressWrapper.className = "progressWrapper";
         this.fileProgressWrapper.id = this.fileProgressID;

         this.fileProgressElement = document.createElement("div");
         this.fileProgressElement.className = "progressContainer";

         var progressCancel = document.createElement("a");
         progressCancel.className = "progressCancel";
         progressCancel.href = "#";
         progressCancel.style.visibility = "hidden";
         progressCancel.appendChild(document.createTextNode(" "));

         var progressText = document.createElement("div");
         progressText.className = "progressName";
         progressText.appendChild(document.createTextNode(file.name));

         var progressBar = document.createElement("div");
         progressBar.className = "progressBarInProgress";

         var progressStatus = document.createElement("div");
         progressStatus.className = "progressBarStatus";
         progressStatus.innerHTML = " ";

         this.fileProgressElement.appendChild(progressCancel);
         this.fileProgressElement.appendChild(progressText);
         this.fileProgressElement.appendChild(progressStatus);
         this.fileProgressElement.appendChild(progressBar);

         this.fileProgressWrapper.appendChild(this.fileProgressElement);

         document.getElementById(targetID).appendChild(this.fileProgressWrapper);
     } else {
         this.fileProgressElement = this.fileProgressWrapper.firstChild;
         this.reset();
     }

     this.height = this.fileProgressWrapper.offsetHeight;
     this.setTimer(null);

 }

 FileProgress.prototype.setTimer = function (timer) {
     this.fileProgressElement["FP_TIMER"] = timer;
 };
 FileProgress.prototype.getTimer = function (timer) {
     return this.fileProgressElement["FP_TIMER"] || null;
 };

 FileProgress.prototype.reset = function () {
     this.fileProgressElement.className = "progressContainer";

     this.fileProgressElement.childNodes[].innerHTML = " ";
     this.fileProgressElement.childNodes[].className = "progressBarStatus";

     this.fileProgressElement.childNodes[].className = "progressBarInProgress";
     this.fileProgressElement.childNodes[].style.width = "0%";

     this.appear();
 };

 FileProgress.prototype.setProgress = function (percentage) {
     this.fileProgressElement.className = "progressContainer green";
     this.fileProgressElement.childNodes[].className = "progressBarInProgress";
     this.fileProgressElement.childNodes[].style.width = percentage + "%";

     this.appear();
 };
 FileProgress.prototype.setComplete = function () {
     this.fileProgressElement.className = "progressContainer blue";
     this.fileProgressElement.childNodes[].className = "progressBarComplete";
     this.fileProgressElement.childNodes[].style.width = "";

     var oSelf = this;
     this.setTimer(setTimeout(function () {
         oSelf.disappear();
     }, ));
 };
 FileProgress.prototype.setError = function () {
     this.fileProgressElement.className = "progressContainer red";
     this.fileProgressElement.childNodes[].className = "progressBarError";
     this.fileProgressElement.childNodes[].style.width = "";

     var oSelf = this;
     this.setTimer(setTimeout(function () {
         oSelf.disappear();
     }, ));
 };
 FileProgress.prototype.setCancelled = function () {
     this.fileProgressElement.className = "progressContainer";
     this.fileProgressElement.childNodes[].className = "progressBarError";
     this.fileProgressElement.childNodes[].style.width = "";

     var oSelf = this;
     this.setTimer(setTimeout(function () {
         oSelf.disappear();
     }, ));
 };
 FileProgress.prototype.setStatus = function (status) {
     this.fileProgressElement.childNodes[].innerHTML = status;
 };

 // Show/Hide the cancel button
 FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
     this.fileProgressElement.childNodes[].style.visibility = show ? "visible" : "hidden";
     if (swfUploadInstance) {
         var fileID = this.fileProgressID;
         this.fileProgressElement.childNodes[].onclick = function () {
             swfUploadInstance.cancelUpload(fileID);
             return false;
         };
     }
 };

 FileProgress.prototype.appear = function () {
     if (this.getTimer() !== null) {
         clearTimeout(this.getTimer());
         this.setTimer(null);
     }

     if (this.fileProgressWrapper.filters) {
         try {
             this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = ;
         } catch (e) {
             // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
             this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
         }
     } else {
         this.fileProgressWrapper.style.opacity = ;
     }

     this.fileProgressWrapper.style.height = "";

     this.height = this.fileProgressWrapper.offsetHeight;
     this.opacity = ;
     this.fileProgressWrapper.style.display = "";

 };

 // Fades out and clips away the FileProgress box.
 FileProgress.prototype.disappear = function () {

     var reduceOpacityBy = ;
     var reduceHeightBy = ;
     var rate = ;    // 15 fps

     if (this.opacity > ) {
         this.opacity -= reduceOpacityBy;
         if (this.opacity < ) {
             this.opacity = ;
         }

         if (this.fileProgressWrapper.filters) {
             try {
                 this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
             } catch (e) {
                 // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
                 this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
             }
         } else {
             this.fileProgressWrapper.style.opacity = this.opacity / ;
         }
     }

     if (this.height > ) {
         this.height -= reduceHeightBy;
         if (this.height < ) {
             this.height = ;
         }

         this.fileProgressWrapper.style.height = this.height + "px";
     }

     if (this.height >  || this.opacity > ) {
         var oSelf = this;
         this.setTimer(setTimeout(function () {
             oSelf.disappear();
         }, rate));
     } else {
         this.fileProgressWrapper.style.display = "none";
         this.setTimer(null);
     }
 };

jsProgress.js

defalut.css

 /* -----------------------------------------------
     www.swfupload.org
     Description: Common Screen Stylesheet for SWFUpload Demos
     Updated on:  May 1, 2008
 ----------------------------------------------- */

 /* -----------------------------------------------
     GLOBAL RESET
    ----------------------------------------------- */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
     margin: ;
     padding: ;
     border: ;
     outline: ;
     font-weight: inherit;
     font-style: inherit;
     font-size: %;
     font-family: inherit;
     vertical-align: baseline;
 }

 /* remember to define focus styles! */
 :focus { outline: ; }
 body {
     line-height: ;
     color: black;
     background: white;
 }
 ol, ul {
     list-style: none;
 }
 /* tables still need 'cellspacing="0"' in the markup */
 table {
     border-collapse: separate;
     border-spacing: ;
 }
 caption, th, td {
     text-align: left;
     font-weight: normal;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: "";
 }
 blockquote, q {
     quotes: "" "";
 }

 /* -----------------------------------------------
     BASIC ELEMENTS
    ----------------------------------------------- */

 /* -- Text Styles ------------------------------- */
 html,
 body {
     margin: ;
     padding: ;
     width: %;
     font: 12px/.4em Helvetica, Arial, sans-serif;
 }

 a {
     color: #385ea2;
     text-decoration: none;
 }
 a:hover { text-decoration: underline; }

 strong { font-weight: ; }

 h1 {
     font: 28px/1em  Arial, Helvetica, sans-serif;
     padding: 60px 20px 20px;
     margin-bottom: 15px;
     color: #;
     text-decoration: none;
 }

 h1 a{
     color: #fff;
     text-decoration: none;
 }

 h2 {
     font-size: 22px;
     font-weight: ;
     padding-top: 1em;
     padding-bottom: .25em;
 }

 p {
     margin-top: .25em;
     margin-bottom: .5em;
 }

 ul { padding: 4px 5px; }
 ul li {
     padding: 4px 5px;
     margin:  20px;
     list-style:square;
 }

 code {
     display: block;
     background:#edffb8 none repeat scroll %;
     border-color:#b2da3a;
     border-style:solid;
     border-width:1px ;
     font-size: 1em;
     margin: 1em 0pt;
     overflow:auto;
     padding: .3em .4em;
     white-space:pre;
 }

 /* -- Layout ------------------------------- */

 #header {
     background: # url(../images/header-bg.jpg) repeat-x top left;
     height: 125px;
     position: relative;
 }
     #logo {
         padding: ;
         margin: ;
         background: url(../images/logo.gif) no-repeat 20px 20px;
         height: 106px;
         width: 272px;
         text-indent: -5000px;
         overflow: hidden;
     }
     /* hide link text */
     #logo a {
         display: block;
         color: #fff;
         text-indent: -5000px;
         overflow: hidden;
         height: 106px;
         width: 272px;
     }

     #version {
         color: #fff;
         position: absolute;
         right: 20px;
         top: 85px;
     }

 #content { width: 680px;}
 #content { margin: 20px 90px; }

 /* -- Form Styles ------------------------------- */
 form {
     margin: ;
     padding: ;
 }

 div.fieldset {
     border:  1px solid #afe14c;
     margin: 10px ;
     padding: 20px 10px;
 }
 div.fieldset span.legend {
     position: relative;
     background-color: #FFF;
     padding: 3px;
     top: -30px;
     font:  14px Arial, Helvetica, sans-serif;
     color: #73b304;
 }

 div.flash {
     width: 375px;
     margin: 10px 5px;
     border-color: #D9E4FF;

     -moz-border-radius-topleft : 5px;
     -webkit-border-top-left-radius : 5px;
     -moz-border-radius-topright : 5px;
     -webkit-border-top-right-radius : 5px;
     -moz-border-radius-bottomleft : 5px;
     -webkit-border-bottom-left-radius : 5px;
     -moz-border-radius-bottomright : 5px;
     -webkit-border-bottom-right-radius : 5px;

 }

 button,
 input,
 select,
 textarea {
     border-width: 1px;
     margin-bottom: 10px;
     padding: 2px 3px;
 }

 input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */

 label {
     width: 150px;
     text-align: right;
     display:block;
     margin-right: 5px;
 }

 #btnSubmit { margin:    155px ; }

 /* -- Table Styles ------------------------------- */
 td {
     font: 10pt Helvetica, Arial, sans-serif;
     vertical-align: top;
 }

 .progressWrapper {
     width: 357px;
     overflow: hidden;
 }

 .progressContainer {
     margin: 5px;
     padding: 4px;
     border: solid 1px #E8E8E8;
     background-color: #F7F7F7;
     overflow: hidden;
 }
 /* Message */
 .message {
     margin: 1em ;
     padding: 10px 20px;
     border: solid 1px #FFDD99;
     background-color: #FFFFCC;
     overflow: hidden;
 }
 /* Error */
 .red {
     border: solid 1px #B50000;
     background-color: #FFEBEB;
 }

 /* Current */
 .green {
     border: solid 1px #DDF0DD;
     background-color: #EBFFEB;
 }

 /* Complete */
 .blue {
     border: solid 1px #CEE2F2;
     background-color: #F0F5FF;
 }

 .progressName {
     font-size: 8pt;
     font-weight: ;
     color: #;
     width: 323px;
     height: 14px;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
 }

 .progressBarInProgress,
 .progressBarComplete,
 .progressBarError {
     font-size: ;
     width: %;
     height: 2px;
     background-color: blue;
     margin-top: 2px;
 }

 .progressBarComplete {
     width: %;
     background-color: green;
     visibility: hidden;
 }

 .progressBarError {
     width: %;
     background-color: red;
     visibility: hidden;
 }

 .progressBarStatus {
     margin-top: 2px;
     width: 337px;
     font-size: 7pt;
     font-family: Arial;
     text-align: left;
     white-space: nowrap;
 }

 a.progressCancel {
     font-size: ;
     display: block;
     height: 14px;
     width: 14px;
     background-image: url(../images/cancelbutton.gif);
     background-repeat: no-repeat;
     background-position: -14px 0px;
     float: right;
 }

 a.progressCancel:hover {
     background-position: 0px 0px;
 }

 /* -- SWFUpload Object Styles ------------------------------- */
 .swfupload {
     vertical-align: top;
 }

default.css