jquery1.4+SWFUpload2.2+COS的jquery上传插件

一直没时间或者说没心情解决ie6兼容问题，前几天有位Iteye的朋友说解决了，我下载他解决后的代码，对比后，发现问题所在。
一：

引入必须的js文件和css文件：

/*jquery1.4核心库*/
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
/*自定义jquery插件vinSwfUpload的皮肤css样式*/
<link href="css/vinSwfUpload-1.2-skin.css" rel="stylesheet" type="text/css"/>
/*自定义jquery插件vinSwfUpload的主要css样式*/
<link href="css/vinSwfUpload-1.2.css" rel="stylesheet" type="text/css"/>
/*自定义jquery插件vinSwfUpload的jquery插件js*/
<script type="text/javascript" src="vinSWFUpload-1.2.js"></script>
/*官方SwfUpload的核心js/

这里不该引入这个文件
<script type="text/javascript" src="core/SWFUpload-2.2.js"></script>
修改后引入

<script type="text/javascript" src="core/swfupload.js">

二：

在body中添加组件显示目标

<div id="vinEdit"></div>

三：

在jqeury中初始化插件

<script type="text/javascript">
	$(function() {
		// 文档就绪
		var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/";
		var upload = $("#vinEdit").vinSWFUpload( {
			uploadURL:'<%=path%>/swf/upload',
			width : 500,
			heigth : 300,
			sizeUnit:"M",
			skin:"green",
			autoRemoveStoped:false,
			flashURL : path+"core/SWFUpload.swf",
			addImgURl:path+"images/add.gif",
			uploadImgURl:path+"/images/upload.png",
			stopImgURl:path+"images/stop.png",
			deleteImgURl:path+"images/trash.gif",
			tipImgURl:path+"images/tip.gif"
		});
		
		
	});
</script>

3.参数说明：

注：有关SWFUpload的详细说明请参考SWFUpload V2.2.0 说明文档：
http://leeon.me/upload/other/swfupload.html

width : 500,	插件显示区域宽度
heigth : 100,	插件显示区域高度
uploadURL:'/swf/upload',	处理上传请求的服务器端脚本URL
flashURL:"core/SWFUpload.swf",	SWFUpload.swf的文件地址
flash9URL:"core/SWFUpload_f9.swf",	SWFUpload_f9.swf f的文件地址
hideUploadBt:true,	隐藏上传按钮
hideStopBt:true,	隐藏停止按钮
hideDeleteSelectBt:true,		隐藏删除按钮
hideDeleteAllBt:true,		隐藏删除所有按钮
addImgURl:"images/add.gif",			新增按钮的图标地址
uploadImgURl:"images/upload.png",			上传按钮的图标地址
stopImgURl:"images/stop.png",			停止按钮的图标地址
deleteImgURl:"images/trash.gif",			删除按钮的图标地址
tipImgURl:"images/tip.gif",			加载提示图片的地址
fileLimit:0,			限定用户一次性最多上传多少个文件
maxSize:'-1',//1M			上传文件体积上限，单位byte,默认10M
sizeUnit:"Byte",			选择的文件最终显示的计量结果单位
sizeFixed:2,	在计算结果后保留的小数位数
fileType:"*.*",	允许上传的文件类型
autoRemove:false,		是否自动移除完成上传的记录
autoRemoveStoped:false,	是否在停止的时候移除上传中的文件记录
postParams:{}	可以将其他字段跟随上传文件一起传到后台
skin:"gray", 	皮肤样式：
"gray","black",
"blue","green",
"orange","purple",
"red"	
progressStyle:"progressBar",//progressBar,percent	进度显示效果
Percent：百分比
progressBar：进度条

4、效果图预览 （1）




效果图预览 （2）



有了上传插件，那肯定是要有处理上传的类的，举例使用servlet+COS：

下面是主要代码：（详细代码见class文件）

DefaultFileRenamePolicy rename = generateFileRenamePolicy();
		MultipartRequest multi = null;
		try {
			multi = new MultipartRequest(request, parameters.getSaveDirectory(), parameters.getMaxPostSize(),parameters.getEncoding(), rename);
			renderJson(response,Constant.UPLOAD_SUCCESS);
		} catch (IOException e) {
			if(!BlankUtil.isBlank(e.getMessage())){
				int index = e.getMessage().indexOf("Posted content length of");
				if(index>-1){
					renderJson(response,Constant.FILE_OVERSETSIZE);
				}else{
					if(e instanceof IOException){
						renderJson(response,Constant.IO_ERROR);
					}else{
						renderJson(response,Constant.UPLOAD_FAILED);
					}
				}
				logger.error(e.getMessage(),e.getCause());
			}else{
				logger.info("--- upload file upload error ---");
				deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());
			}
			return;
		}

写好了处理类就是配置了：

web.xml中添加下面配置：

<!--swfUploader	-->
	<servlet>
		<servlet-name>swfUploader</servlet-name>
		<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>
		<!--上传的文件大小上限 单位M-->
		<init-param>
			<param-name>FILE_SIZE_LIMIT</param-name>
			<param-value>10</param-value>
		</init-param>
		<!--一次性上传的文件个数上限-->
		<init-param>
			<param-name>FILE_COUNT_LIMIT</param-name>
			<param-value>10</param-value>
		</init-param>
		<!--请求响应编码格式-->
		<init-param>
			<param-name>ENCODING</param-name>
			<param-value>utf-8</param-value>
		</init-param>
		<!--是否使用自定义目录-->
		<init-param>
			<param-name>USE_CUSTOMDIR</param-name>
			<param-value>false</param-value>
		</init-param>
		<!--自定义的文件保存目录-->
		<init-param>
			<param-name>ROOT_UPLOADDIR</param-name>
			<param-value>rootUpload</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>swfUploader</servlet-name>
		<url-pattern>/swf/upload</url-pattern>
	</servlet-mapping>

评论

23 楼 62500953 2014-07-21  

引用

引用

    

22 楼 seyaa 2011-08-14  

xbyy123 写道

有没有ie6上面的解决办法 老师 卡死，火狐上好着。

你可以按照修改后的再试试

21 楼 xbyy123 2011-08-08  

有没有ie6上面的解决办法 老师 卡死，火狐上好着。

20 楼 白云飞 2011-06-29  

兄弟我用ie7，经常会假死啊，页面死掉，用火狐没事

19 楼 seyaa 2011-06-29  

javaoldboy 写道

我的IE7也不行哦，页面直接挂死了

很奇怪的原因，不知道为什么？我在html中直接预览的时候 是有问题的，放在项目中运行的时候，按钮上面的字 竟然不出来了，以前都是好的，不知道和最近adobe reader 更新了有关

18 楼 javaoldboy 2011-06-28  

我的IE7也不行哦，页面直接挂死了

17 楼 seyaa 2011-06-21  

xfzhi888 写道

你好，使用你的例子，拿到项目里测
直接访问：http://localhost:8080/test/uiwidget/vinSwfUpload-1.2/vinSwfUpload-1.2-demo2.jsp
发现界面反应很慢，ie浏览器占用cpu48%
操作系统：xp sp3，
浏览器：
ie6.0，360浏览器3.7

其他同仁有遇到类似的问题没？请指点指点。

我有遇到这样的问题，如果ie版本低就会出现，使用高版本ie或者火狐 就没有发现了

16 楼 xfzhi888 2011-06-15  

你好，使用你的例子，拿到项目里测
直接访问：http://localhost:8080/test/uiwidget/vinSwfUpload-1.2/vinSwfUpload-1.2-demo2.jsp
发现界面反应很慢，ie浏览器占用cpu48%
操作系统：xp sp3，
浏览器：
ie6.0，360浏览器3.7

其他同仁有遇到类似的问题没？请指点指点。

15 楼 mib168 2011-06-10  

受启发了，平时上传都不给弄着界面，以后看来可以加入这个来吸引眼球 呵呵

14 楼 seyaa 2011-06-09  

wukele 写道

如果能够自定义，输入项，那就更好了

什么输入项 form中的其他字段吗

13 楼 KimHo 2011-06-09  

COS这个上传组件还是挺不错的，性能比较好

12 楼 liuyes 2011-06-09  

这个必须支持

11 楼 socrazy06 2011-06-09  

谢谢分享！~~~

10 楼 wukele 2011-06-09  

如果能够自定义，输入项，那就更好了

9 楼 50980487 2011-06-08  

界面很不错,注释也比较详细..谢谢分享!!!

8 楼 seyaa 2011-06-08  

youjianbo_han_87 写道

测试过大文件上传吗？ 会有内存溢出吗？

测试过七八百兆的上传，本地速度很快，没有内存溢出，cos本省就是一个比较稳定的上传组件，外网的时候 速度就不会很高了

7 楼 youjianbo_han_87 2011-06-08  

测试过大文件上传吗？ 会有内存溢出吗？

6 楼 181054867 2011-06-08  

好，swfUpload以前没研究出来，感謝您的分享！

5 楼 snowstone 2011-06-08  

界面真不错.收藏.

4 楼 seyaa 2011-06-03  

gwpking8419 写道

界面做的不错

呵呵 谢谢认同，花了一周多时间 修改的