近日,项目组需要使用swfupload来实现批量上传文件,项目前台处理主要运用最基础的mvc模式。刚开始在网上查了些相关资料绝大部分都是Php方面的。现我所用swfupload基本告一段落了,现将我所学习到的记录下来,与同仁们共勉,为奋战在一线人员提供点帮助!
1. swfupload是第三方开软件,其官网上有相关文件下载。主要有 上传页面、javascript库及相关图片与css样式,如图:
2. 后台处理是采用servlet:
采用 DiskFileItemFactory类及 ServletFileUpload 来接收与保存上传文件到磁盘,相关内容均可在网上查到。我还是将此代码上传供大家下载吧。
下载地址: http://download.csdn.net/detail/yxl2005play/4256355
swfupload上传页面配置与说明如下:
window.onload = function () {
swfu = new SWFUpload({
use_query_string:true, //设置传参否则无法进行参数传递request
upload_url: "<%=uploadUrl.toString()%>", //后台处理url
post_params: {"sessionID" : "<%=sessionID%>"},
// 文件上传设置块
file_size_limit : "800 MB", // 最大文件大小为800MB
file_types : "*.*", //允许上传所有格式文件
file_types_description : "所有文件",
file_upload_limit : 100, //一次最多上传100个文件。若设值为0则表示不限制
file_queue_limit : 0, //队列中最小个数
//函数设置块
file_queue_error_handler : fileQueueError, //队列异常处理
file_dialog_complete_handler : fileDialogComplete, //选择好文件后提交
file_queued_handler : fileQueued, //队列处理
upload_start_handler : returnUploadStart, //上传处理
upload_progress_handler : uploadProgress, //上传进度
upload_error_handler : uploadError, //上传异常
upload_success_handler : uploadSuccess, //上传成功
upload_complete_handler : uploadComplete, //上传完成
//按钮设置部分块
button_image_url : "images/TestImageNoText_65x29.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 68,
button_height: 20,
button_text : '<span class="button">浏览 <span class="buttonSmall"></span></span>',
button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 0,
button_text_left_padding: 18,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// Flash Settings
flash_url : "js/swfupload/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: false //是否显示调试窗口
});
};
其中请注意几点问题:
1. 请处设置传参及乱码问题;
解决方法:在上传页面上设置 use_query_string:true, 并设置file_dialog_complete_handler : fileDialogComplete, 在handel.js中写fileDialogComplete函数,在此函数中动态设置上传数据,并使用encodeURI解决中文乱码问题,如:this.addPostParam("file_no" ,encodeURI( "测试传参: " + file.name,"utf-8"));
2. session处理 :
问题描述:当上传文件servlet接收文件时,其HttpServletResquest都会被清空,并重新创建此对象,即我们项目中保存的session对象在此servlet中都不会有数据。如果上传文件需要做权限或登录验证将无法直接判断,因为这些session对象都不存在于此sevlet中。
解决方法:在上传页面中获得session ID 并将其以传参的方式传给servlet,在servlet中获取session id,再根据此session id生成session对象。此对象与之前保存的session对象完全相同。具体代码将在下一节中说明。