SWFUpload的菜鸟实例应用和分析

　　以前老是喜欢把这种东西拷在U盘上，然后U盘就悲剧的折断了，所以就记在这里了，也希望大神们能纠正我的错误观点。本文章的例子是官网上的demo，菜鸟刚刚学的，很多都不懂慢慢瞎摸的，官网地址：http://swfupload.googlecode.com 例子demo的网址：http://demo.swfupload.org/v220/index.htm。

　　首先是坑爹的导js和css，我把js都放在js_upload的包下面了，然后css都放在css包下面，整个jsp是新建在WebContent下的，代码如下：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <link rel="stylesheet" type="text/css"  href="css/default.css" />
 9 <script type="text/javascript" src="js_upload/swfupload.js"></script>
10 <script type="text/javascript" src="js_upload/swfupload.queue.js"></script>
11 <script type="text/javascript" src="js_upload/fileprogress.js"></script>
12 <script type="text/javascript" src="js_upload/handlers.js"></script>
13 <script type="text/javascript">
14         var swfu;
15 
16         window.onload = function() {
17             var settings = {
18                 flash_url : "swf/swfupload.swf",//核心功能swf的地址
19                 flash9_url:"http://www.swfupload.org/swfupload_fp9.swf",//flash9_url : "../swfupload/swfupload_fp9.swf",
20                 upload_url: "php/upload.php",//处理上传文件的地址
21                 post_params: {"PHPSESSID" : ""},//定义一些键/值对。允许在上传每个文件时候捎带地post给服务器
22                 file_size_limit : "100 MB",//文件大小过滤规则，0表示无限制，默认单位KB
23                 file_types : "*.*",//文件类型过滤规则，默认接受所有类型文件
24                 file_types_description : "All Files",//设置文件选择对话框中显示给用户的文件描述，默认All Files
25                 file_upload_limit : 100,//允许上传的最多文件数量，0表示数量无限制
26                 file_queue_limit : 0,//上传队列中等待文件的最大数量限制
27                 custom_settings : {//开发人员自定义设置，设置完毕以后，可以通过实例的custom_settings属性来访问
28                     progressTarget : "fsUploadProgress",
29                     cancelButtonId : "btnCancel"
30                 },
31                 debug: false,//该值是布尔类型，设置debug事件是否被触发
32 
33                 // Button settings
34                 button_image_url: "images/begin.jpg",//指定按钮的背景图
35                 button_width: "65",//按钮的宽度
36                 button_height: "29",//按钮的高度
37                 button_placeholder_id: "spanButtonPlaceHolder",//指定一个dom元素的id作为flash按钮
38                 button_text: '<span class="theFont">Hello</span>',//按钮上的文字
39                 button_text_style: ".theFont { font-size: 16; }",//按钮上的文字的样式
40                 button_text_left_padding: 12,//文字距离左侧的距离
41                 button_text_top_padding: 3,//文字距离顶部的距离
42                 
43                 // The event handler functions are defined in handlers.js
44                 swfupload_preload_handler : preLoad,//SWFUpload 已确认各项可用特性之后，Flash Movie加载完毕之前的这段时间内触发的事件
45                 swfupload_load_failed_handler : loadFailed,//当页面不能正常加载flash影片的时候触发的事件
46                 file_queued_handler : fileQueued,//当选择好文件，文件选择对话框关闭消失时，如果选择的文件成功加入待上传队列，那么针对每个成功加入的文件都会触发一次该事件（N个文件成功加入队列，就触发N次此事件）
47                 file_queue_error_handler : fileQueueError,//当选择文件对话框关闭时，如果选择的文件加入到上传队列中失败，那么针对每个出错的文件都会触发一次该事件
48                 file_dialog_complete_handler : fileDialogComplete,//当选择文件对话框关闭，并且所有选择文件已经处理完成（加入上传队列成功或者失败）时，此事件被触发
49                 upload_start_handler : uploadStart,//上传开始事件处理函数
50                 upload_progress_handler : uploadProgress,//上传过程事件处理函数
51                 upload_error_handler : uploadError,//上传错误事件处理函数
52                 upload_success_handler : uploadSuccess,//上传成功事件处理函数
53                 upload_complete_handler : uploadComplete,//上传完成事件处理函数
54                 queue_complete_handler : queueComplete    // Queue plugin event队列插件事件
55             };
56 
57             swfu = new SWFUpload(settings);
58          };
59     </script>
60  
61 </head>
62 <body>
63 <div id="header">
64     <h1 id="logo"><a href="../">SWFUpload</a></h1>
65     <div id="version">v2.5.0</div>
66 </div>
67 
68 <div id="content">
69     <h2>Simple Demo</h2>
70     <form id="form1" action="index.php" method="post" enctype="multipart/form-data"><!-- 没有导这个php文件 -->
71         <p>This page demonstrates a simple usage of SWFUpload.  It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>
72 
73             <div class="fieldset flash" id="fsUploadProgress">
74             <span class="legend">Upload Queue</span>
75             </div>
76         <div id="divStatus">0 Files Uploaded</div>
77             <div>
78                 <span id="spanButtonPlaceHolder"></span>
79                 <input id="btnCancel" type="button" value="Cancel All Uploads" 
80                 onclick="swfu.cancelQueue();" disabled="disabled" 
81                 style="margin-left: 2px; font-size: 8pt; height: 29px;" /><!-- onclick触发的函数在哪里我也不知道 -->
82             </div>
83 
84     </form>
85 </div>
86 </body>
87 </html>

　　菜鸟认为其他的js文件都是没有什么改动的，最难看的就是handlers.js，下面贴出来：

  1 /**
  2  * 当选择好文件，文件选择对话框关闭消失时，如果选择的文件成功加入待上传队列，那么针对每个成功加入的文件都会触发一次该事件（N个文件成功加入队列，就触发N次此事件）
  3  */
  4 function fileQueued(file) {
  5     try {
  6         var progress = new FileProgress(file, this.customSettings.progressTarget);
  7         progress.setStatus("Pending...");
  8         progress.toggleCancel(true, this);
  9 
 10     } catch (ex) {
 11         this.debug(ex);
 12     }
 13 
 14 }
 15 /*
 16  * 当选择文件对话框关闭时，如果选择的文件加入到上传队列中失败，那么针对每个出错的文件都会触发一次该事件
 17  */
 18 function fileQueueError(file, errorCode, message) {
 19     try {
 20         if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {//用户选取的文件超过了允许的数量
 21             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.")));
 22             return;
 23         }
 24 
 25         var progress = new FileProgress(file, this.customSettings.progressTarget);
 26         progress.setError();
 27         progress.toggleCancel(false);
 28 
 29         switch (errorCode) {
 30         case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT://文件的体积超过了允许的大小
 31             progress.setStatus("File is too big.");
 32             this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
 33             break;
 34         case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE://文件是空的
 35             progress.setStatus("Cannot upload Zero Byte files.");
 36             this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
 37             break;
 38         case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE://不允许的文件类型
 39             progress.setStatus("Invalid File Type.");
 40             this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
 41             break;
 42         default:
 43             if (file !== null) {
 44                 progress.setStatus("Unhandled Error");
 45             }
 46             this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
 47             break;
 48         }
 49     } catch (ex) {
 50         this.debug(ex);
 51     }
 52 }
 53 /**
 54  * 上传开始事件处理函数
 55  * @param file
 56  * @returns {Boolean}
 57  */
 58 function uploadStart(file) {
 59     try {
 60         /* I don't want to do any file validation or anything,  I'll just update the UI and
 61         return true to indicate that the upload should start.
 62         It's important to update the UI here because in Linux no uploadProgress events are called. The best
 63         we can do is say we are uploading.
 64          */
 65         var progress = new FileProgress(file, this.customSettings.progressTarget);
 66         progress.setStatus("Uploading...");
 67         progress.toggleCancel(true, this);
 68     }
 69     catch (ex) {}
 70     
 71     return true;
 72 }
 73 /**
 74  * 上传过程事件处理函数
 75  * @param file
 76  * @param bytesLoaded
 77  * @param bytesTotal
 78  */
 79 function uploadProgress(file, bytesLoaded, bytesTotal) {
 80     try {
 81         var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
 82 
 83         var progress = new FileProgress(file, this.customSettings.progressTarget);
 84         progress.setProgress(percent);
 85         progress.setStatus("Uploading...");
 86     } catch (ex) {
 87         this.debug(ex);
 88     }
 89 }
 90 /**
 91  * 上传完成事件处理函数
 92  * @param file
 93  */
 94 function uploadComplete(file) {
 95     try {
 96         /*  I want the next upload to continue automatically so I'll call startUpload here */
 97         if (this.getStats().files_queued > 0) {
 98             this.startUpload();
 99         } else {
100             var progress = new FileProgress(file,  this.customSettings.upload_target);
101             progress.setComplete();
102             progress.setStatus("All images received.");
103             progress.toggleCancel(false);
104         }
105     } catch (ex) {
106         this.debug(ex);
107     }
108 }
109 /**
110  * 上传成功事件处理函数
111  * @param file
112  * @param serverData
113  */
114 function uploadSuccess(file, serverData) {
115     try {
116         var progress = new FileProgress(file, this.customSettings.progressTarget);
117         progress.setComplete();
118         progress.setStatus("Complete.");
119         progress.toggleCancel(false);
120 
121     } catch (ex) {
122         this.debug(ex);
123     }
124 }
125 /**
126  * 上传错误事件处理函数
127  * @param file
128  * @param errorCode
129  * @param message
130  */
131 function uploadError(file, errorCode, message) {
132     try {
133         var progress = new FileProgress(file, this.customSettings.progressTarget);
134         progress.setError();
135         progress.toggleCancel(false);
136 
137         switch (errorCode) {
138         case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
139             progress.setStatus("Upload Error: " + message);
140             this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
141             break;
142         case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
143             progress.setStatus("Upload Failed.");
144             this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
145             break;
146         case SWFUpload.UPLOAD_ERROR.IO_ERROR:
147             progress.setStatus("Server (IO) Error");
148             this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
149             break;
150         case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
151             progress.setStatus("Security Error");
152             this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
153             break;
154         case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
155             progress.setStatus("Upload limit exceeded.");
156             this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
157             break;
158         case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
159             progress.setStatus("Failed Validation.  Upload skipped.");
160             this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
161             break;
162         case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
163             progress.setStatus("Cancelled");
164             progress.setCancelled();
165             break;
166         case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
167             progress.setStatus("Stopped");
168             break;
169         default:
170             progress.setStatus("Unhandled Error: " + errorCode);
171             this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
172             break;
173         }
174     } catch (ex) {
175         this.debug(ex);
176     }
177 }
178 
179 // This event comes from the Queue Plugin
180 function queueComplete(numFilesUploaded) {
181     var status = document.getElementById("divStatus");
182     status.innerHTML = numFilesUploaded + " file" + (numFilesUploaded === 1 ? "" : "s") + " uploaded.";
183 }
184 /**
185  * 当选择文件对话框关闭，并且所有选择文件已经处理完成（加入上传队列成功或者失败）时，此事件被触发
186  * @param numFilesSelected
187  * @param numFilesQueued
188  */
189 function fileDialogComplete(numFilesSelected, numFilesQueued) {
190     try {
191         if (numFilesQueued > 0) {
192             this.startUpload();
193         }
194     } catch (ex) {
195         this.debug(ex);
196     }
197 }
198 /**
199  * 当页面不能正常加载flash影片的时候触发的事件
200  */
201 function loadFailed() {
202     clearTimeout(this.customSettings.loadingTimeout);
203     //document.getElementById("divSWFUploadUI").style.display = "none";
204     document.getElementById("divLoadingContent").style.display = "none";
205     document.getElementById("divLongLoading").style.display = "none";
206     document.getElementById("divAlternateContent").style.display = "";
207 }
208 /**
209  * SWFUpload 已确认各项可用特性之后，Flash Movie加载完毕之前的这段时间内触发的事件
210  */
211 function preLoad() {
212     var self = this;
213     var loading = function () {
214         //document.getElementById("divSWFUploadUI").style.display = "none";
215         document.getElementById("divLoadingContent").style.display = "";
216 
217         var longLoad = function () {
218             document.getElementById("divLoadingContent").style.display = "none";
219             document.getElementById("divLongLoading").style.display = "";
220         };
221         this.customSettings.loadingTimeout = setTimeout(function () {
222                 longLoad.call(self)
223             },
224             15 * 1000
225         );
226     };
227     
228     this.customSettings.loadingTimeout = setTimeout(function () {
229             loading.call(self);
230         },
231         1*1000
232     );
233 }

　　看这个js也是没什么看懂的，云里雾里的，里面的函数都是和jsp中的那些函数是相对应的，至于有没有错就不得而知了。

　　css里面的图片的路径记得要改了不然你是看不到那个按钮滴：

  1 html, body, div, span, applet, object, iframe,
  2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 a, abbr, acronym, address, big, cite, code,
  4 del, dfn, font, img, ins, kbd, q, s, samp,
  5 small, strike, strong, sub, sup, tt, var,
  6 dl, dt, dd, ol, ul, li,
  7 fieldset, form, label, legend,
  8 table, caption, tbody, tfoot, thead, tr, th, td {
  9     margin: 0;
 10     padding: 0;
 11     border: 0;
 12     outline: 0;
 13     font-weight: inherit;
 14     font-style: inherit;
 15     font-size: 100%;
 16     font-family: inherit;
 17     vertical-align: baseline;
 18 }
 19 
 20 /* remember to define focus styles! */
 21 :focus { outline: 0; }
 22 body {
 23     line-height: 1;
 24     color: black;
 25     background: white;
 26 }
 27 ol, ul { 
 28     list-style: none; 
 29 }
 30 /* tables still need 'cellspacing="0"' in the markup */
 31 table {
 32     border-collapse: separate;
 33     border-spacing: 0;
 34 }
 35 caption, th, td {
 36     text-align: left;
 37     font-weight: normal;
 38 }
 39 blockquote:before, blockquote:after,
 40 q:before, q:after { 
 41     content: "";
 42 }
 43 blockquote, q {
 44     quotes: "" "";
 45 }
 46 
 47 
 48 /* ----------------------------------------------- 
 49     BASIC ELEMENTS
 50    ----------------------------------------------- */
 51    
 52    
 53 /* -- Text Styles ------------------------------- */
 54 html, 
 55 body {
 56     margin: 0;
 57     padding: 0;
 58     width: 100%;
 59     font: 12px/1.4em Helvetica, Arial, sans-serif;
 60 }
 61 
 62 a { 
 63     color: #385ea2; 
 64     text-decoration: none; 
 65 }
 66 a:hover { text-decoration: underline; }
 67 
 68 strong { font-weight: 700; }
 69 
 70 h1 {
 71     font: 28px/1em  Arial, Helvetica, sans-serif;
 72     padding: 60px 20px 20px;
 73     margin-bottom: 15px;
 74     color: #333;
 75     text-decoration: none;
 76 }
 77 
 78 h1 a{
 79     color: #fff;
 80     text-decoration: none;
 81 }
 82 
 83 h2 { 
 84     font-size: 22px; 
 85     font-weight: 300;
 86     padding-top: 1em;
 87     padding-bottom: .25em;
 88 }
 89 
 90 
 91 p { 
 92     margin-top: .25em;
 93     margin-bottom: .5em;
 94 }
 95 
 96 ul { padding: 4px 5px; }
 97 ul li { 
 98     padding: 4px 5px; 
 99     margin: 0 20px;
100     list-style:square; 
101 }
102 
103 code {
104     display: block;
105     background:#edffb8 none repeat scroll 0%;
106     border-color:#b2da3a;
107     border-style:solid;
108     border-width:1px 0;
109     font-size: 1em;
110     margin: 1em 0pt;
111     overflow:auto;
112     padding: 0.3em 0.4em;
113     white-space:pre;
114 }
115 
116 /* -- Layout ------------------------------- */
117 
118 
119 #header {
120     background: #313131 url(../images/header-bg.jpg) repeat-x top left;/*图片*/
121     height: 125px;
122     position: relative;
123 }
124     #logo { 
125         padding: 0;
126         margin: 0;
127         background: url(../images/logo.jpg) no-repeat 20px 20px;/*图片*/
128         height: 106px;
129         width: 272px;
130         text-indent: -5000px;
131         overflow: hidden;
132     }
133     /* hide link text */
134     #logo a {
135         display: block;
136         color: #fff;
137         text-indent: -5000px;
138         overflow: hidden;
139         height: 106px;
140         width: 272px;
141     }
142     
143     #version {
144         color: #fff;
145         position: absolute;
146         right: 20px;
147         top: 85px;
148     }
149 
150 
151 #content { width: 680px;}
152 #content { margin: 20px 90px; }
153 
154 
155 
156 
157 /* -- Form Styles ------------------------------- */
158 form {    
159     margin: 0;
160     padding: 0;
161 }
162 
163 
164 
165 div.fieldset {
166     border:  1px solid #afe14c;
167     margin: 10px 0;
168     padding: 20px 10px;
169 }
170 div.fieldset span.legend {
171     position: relative;
172     background-color: #FFF;
173     padding: 3px;
174     top: -30px;
175     font: 700 14px Arial, Helvetica, sans-serif;
176     color: #73b304;
177 }
178 
179 div.flash {
180     width: 375px;
181     margin: 10px 5px;
182     border-color: #D9E4FF;
183 
184     -moz-border-radius-topleft : 5px;
185     -webkit-border-top-left-radius : 5px;
186     -moz-border-radius-topright : 5px;
187     -webkit-border-top-right-radius : 5px;
188     -moz-border-radius-bottomleft : 5px;
189     -webkit-border-bottom-left-radius : 5px;
190     -moz-border-radius-bottomright : 5px;
191     -webkit-border-bottom-right-radius : 5px;
192 
193 }
194 
195 button,
196 input,
197 select,
198 textarea { 
199     border-width: 1px; 
200     margin-bottom: 10px;
201     padding: 2px 3px;
202 }
203 
204 
205 
206 input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */
207 
208 
209 label { 
210     width: 150px; 
211     text-align: right; 
212     display:block;
213     margin-right: 5px;
214 }
215 
216 #btnSubmit { margin: 0 0 0 155px ; }
217 
218 /* -- Table Styles ------------------------------- */
219 td {
220     font: 10pt Helvetica, Arial, sans-serif;
221     vertical-align: top;
222 }
223 
224 .progressWrapper {
225     width: 357px;
226     overflow: hidden;
227 }
228 
229 .progressContainer {
230     margin: 5px;
231     padding: 4px;
232     border: solid 1px #E8E8E8;
233     background-color: #F7F7F7;
234     overflow: hidden;
235 }
236 /* Message */
237 .message {
238     margin: 1em 0;
239     padding: 10px 20px;
240     border: solid 1px #FFDD99;
241     background-color: #FFFFCC;
242     overflow: hidden;
243 }
244 /* Error */
245 .red {
246     border: solid 1px #B50000;
247     background-color: #FFEBEB;
248 }
249 
250 /* Current */
251 .green {
252     border: solid 1px #DDF0DD;
253     background-color: #EBFFEB;
254 }
255 
256 /* Complete */
257 .blue {
258     border: solid 1px #CEE2F2;
259     background-color: #F0F5FF;
260 }
261 
262 .progressName {
263     font-size: 8pt;
264     font-weight: 700;
265     color: #555;
266     width: 323px;
267     height: 14px;
268     text-align: left;
269     white-space: nowrap;
270     overflow: hidden;
271 }
272 
273 .progressBarInProgress,
274 .progressBarComplete,
275 .progressBarError {
276     font-size: 0;
277     width: 0%;
278     height: 2px;
279     background-color: blue;
280     margin-top: 2px;
281 }
282 
283 .progressBarComplete {
284     width: 100%;
285     background-color: green;
286     visibility: hidden;
287 }
288 
289 .progressBarError {
290     width: 100%;
291     background-color: red;
292     visibility: hidden;
293 }
294 
295 .progressBarStatus {
296     margin-top: 2px;
297     width: 337px;
298     font-size: 7pt;
299     font-family: Arial;
300     text-align: left;
301     white-space: nowrap;
302 }
303 
304 a.progressCancel {
305     font-size: 0;
306     display: block;
307     height: 14px;
308     width: 14px;
309     background-image: url(../images/cancelbutton.jpg);/*图片*/
310     background-repeat: no-repeat;
311     background-position: -14px 0px;
312     float: right;
313 }
314 
315 a.progressCancel:hover {
316     background-position: 0px 0px;
317 }
318 
319 
320 /* -- SWFUpload Object Styles ------------------------------- */
321 .swfupload {
322     vertical-align: top;
323 }

　　最后运行的结果是大体上都出来了，但是不知道为什么人家下载大文件的时候那个loading的时间都是会慢慢的，我的唰的一下就下完了，不懂啊不懂，等我以后在回来补充好了，还有就是有个疑问：那个传上去的文件是到哪里去了？

　　警句：菜鸟用爪挖，看者需谨慎，切莫听一面之词，徒走曲折之路。

posted on 2013-07-17 16:50 菜鸟用爪挖阅读(974) 评论(0) 编辑收藏举报