以前老是喜欢把这种东西拷在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 οnclick="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的时间都是会慢慢的，我的唰的一下就下完了，不懂啊不懂，等我以后在回来补充好了，还有就是有个疑问：那个传上去的文件是到哪里去了？
警句：菜鸟用爪挖，看者需谨慎，切莫听一面之词，徒走曲折之路。
扫一扫
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
