swfupload 例子

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




upload.php

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


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 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 }

handler.js


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 = "&nbsp;";
 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 = "&nbsp;";
 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 button
124 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 fps
166 
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 };

jsProgress.js




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 }

default.css

posted @ 2013-08-15 11:39 尹少爷阅读(2884) 评论(0) 编辑收藏举报

刷新页面返回顶部

尹少爷

https://www.sorryu.cn

swfupload 例子

公告