SpringMVC+SwfUpload进行多文件同时上传
由于最近项目需要做一个多文件同时上传的功能，所以好好的看了一下各种上传工具，感觉uploadify和SwfUpload的功能都比较强大，并且使用起来也很方便。SWFUpload是一个flash和js相结合而成的文件上传插件，而且该插件可以用在php、.net、Java等项目开发中。在使用的过程中需要引入两个js文件，并且进行相关参数的配置，同时也可以定义一系列的事件，如：上传成功事件，上传失败事件，正在上传事件等等。由于我在项目开发是使用SpringMVC进行的，所以下面我根据我自己的项目简述一下SwfUpload如何整合到Web项目中去。首先说一下Swfupload相对于HTML中file标签上传的优点：允许一次上传多个文件，但会有一个上传队列，队列里文件的上传是逐个进行的，服务器端接收文件时跟普通的表单上传文件是一样的(相当于表单一次提交了一个file，但是提交了多次，后台处理的时候只需要处理一次即可);用flash进行上传，页面无刷新，且可自定义Flash按钮的样式， 类似AJAX的无刷新上传，里面可以引入swf文件实现动态效果；可以显示上传进度，也可以在浏览器端就对要上传的文件格式，大小等进行配置(只需要配置一个参数即可，比用js的数据验证要好很多)；良好的浏览器兼容性并且兼容其他JavaScript库 (例如：jQuery,EXT, Prototype等)；一般含有flash插件的即可正常运行，但是好像最低要求flash的版本要达到flash9; SwfUpload还提供了丰富的事件接口供开发者使用;开发者可以自定义各种和上传相关的事件；SWfUpload实现文件的上传流程如下：1、引入相应的js文件 （swfupload.js和swfupload.queue.js必须引入）2、实例化SWFUpload对象，传入一个配置参数对象进行各方面的配置。 3、点击SWFUpload提供的Flash按钮(也可以更改配置信息中的button_image_url参数来配置自己的按钮)，弹出文件选取窗口选择要上传的文件； 4、文件选取完成后符合规定的文件会被添加到上传的队列里； 5、调用startUpload方法让队列里文件开始上传； 6、文件上传过程中会触发相应的事件（想要触发什么事件需要自己定义，但是一般网上搜一下就可以了，大部分定义都相同，我也会贴出我的代码），开发者利用这些事件来更新ui、处理错误、发出提示等等； 下面说我的项目中SpringMVC+SwfUpload的配置过程及代码：引入相应的JS文件后实例化SwfUpload对象（JS代码，一般嵌入到jsp文件中或者单独写一个文件引入到jsp页面内）：1 var swfu;23 window.onload = function() {4 var settings = {5 flash_url : "swfupload/swfupload.swf",6 flash9_url : "swfupload/swfupload_fp9.swf",7 upload_url: "http://localhost:8080/ams/upload/fileUpload.do",8 post_params: {"PHPSESSID" : "aa"},9 file_size_limit : "100 MB",10 file_types : "*.*",11 file_post_name : "filedata",12 file_types_description : "All Files",13 file_upload_limit : 100,14 file_queue_limit : 0,15 custom_settings : {16 progressTarget : "fsUploadProgress",17 cancelButtonId : "btnCancel"18 },19 debug: true,2021 // Button settings22 button_image_url: "images/TestImageNoText_65x29.png",23 button_width: "65",24 button_height: "29",25 button_placeholder_id: "spanButtonPlaceHolder",26 button_text: '<span class="theFont">Hello</span>',27 button_text_style: ".theFont { font-size: 16; }",28 button_text_left_padding: 12,29 button_text_top_padding: 3,3031 // The event handler functions are defined in handlers.js32 swfupload_preload_handler : preLoad,33 swfupload_load_failed_handler : loadFailed,34 file_queued_handler : fileQueued,35 file_queue_error_handler : fileQueueError,36 upload_start_handler : uploadStart,37 upload_progress_handler : uploadProgress,38 upload_error_handler : uploadError,39 upload_success_handler : uploadSuccess40 };4142 swfu = new SWFUpload(settings);43 };View Code编写相关的监听事件（JS代码，即html引入的handler.js文件）：1 function preLoad() {2 if (!this.support.loading) {3 alert("You need the Flash Player 9.028 or above to use SWFUpload.");4 return false;5 }6 }7 function loadFailed() {8 alert("Something went wrong while loading SWFUpload. If this were a real application we'd clean up and then give you an alternative");9 }1011 function fileQueued(file) {12 try {13 var progress = new FileProgress(file, this.customSettings.progressTarget);14 progress.setStatus("Pending...");15 progress.toggleCancel(true, this);1617 } catch (ex) {18 this.debug(ex);19 }2021 }2223 function fileQueueError(file, errorCode, message) {24 try {25 if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {26 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.")));27 return;28 }2930 var progress = new FileProgress(file, this.customSettings.progressTarget);31 progress.setError();32 progress.toggleCancel(false);3334 switch (errorCode) {35 case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:36 progress.setStatus("File is too big.");37 this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);38 break;39 case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:40 progress.setStatus("Cannot upload Zero Byte files.");41 this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);42 break;43
