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

publicTIM 2011-06-14

一:

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

Java代码

1./*jquery1.4核心库*/

2.<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>

3./*自定义jquery插件vinSwfUpload的皮肤css样式*/

4.<linkhref="css/vinSwfUpload-1.2-skin.css"rel="stylesheet"type="text/css"/>

5./*自定义jquery插件vinSwfUpload的主要css样式*/

6.<linkhref="css/vinSwfUpload-1.2.css"rel="stylesheet"type="text/css"/>

7./*自定义jquery插件vinSwfUpload的jquery插件js*/

8.<scripttype="text/javascript"src="vinSWFUpload-1.2.js"></script>

9./*官方SwfUpload的核心js/

10.<scripttype="text/javascript"src="core/SWFUpload-2.2.js"></script>

二:

在body中添加组件显示目标

Java代码

1.<divid="vinEdit"></div>

三:

在jqeury中初始化插件

Java代码

1.<scripttype="text/javascript">

2.$(function(){

3.//文档就绪

4.varpath="<%=path%>/uiwidget/vinSwfUpload-1.2/";

5.varupload=$("#vinEdit").vinSWFUpload({

6.uploadURL:'<%=path%>/swf/upload',

7.width:500,

8.heigth:300,

9.sizeUnit:"M",

10.skin:"green",

11.autoRemoveStoped:false,

12.flashURL:path+"core/SWFUpload.swf",

13.addImgURl:path+"images/add.gif",

14.uploadImgURl:path+"/images/upload.png",

15.stopImgURl:path+"images/stop.png",

16.deleteImgURl:path+"images/trash.gif",

17.tipImgURl:path+"images/tip.gif"

18.});

19.

20.

21.});

22.</script>

3.参数说明:

注:有关SWFUpload的详细说明请参考SWFUploadV2.2.0说明文档:

http://leeon.me/upload/other/swfupload.html

Java代码

1.width:500,插件显示区域宽度

2.heigth:100,插件显示区域高度

3.uploadURL:'/swf/upload',处理上传请求的服务器端脚本URL

4.flashURL:"core/SWFUpload.swf",SWFUpload.swf的文件地址

5.flash9URL:"core/SWFUpload_f9.swf",SWFUpload_f9.swff的文件地址

6.hideUploadBt:true,隐藏上传按钮

7.hideStopBt:true,隐藏停止按钮

8.hideDeleteSelectBt:true,隐藏删除按钮

9.hideDeleteAllBt:true,隐藏删除所有按钮

10.addImgURl:"images/add.gif",新增按钮的图标地址

11.uploadImgURl:"images/upload.png",上传按钮的图标地址

12.stopImgURl:"images/stop.png",停止按钮的图标地址

13.deleteImgURl:"images/trash.gif",删除按钮的图标地址

14.tipImgURl:"images/tip.gif",加载提示图片的地址

15.fileLimit:0,限定用户一次性最多上传多少个文件

16.maxSize:'-1',//1M上传文件体积上限,单位byte,默认10M

17.sizeUnit:"Byte",选择的文件最终显示的计量结果单位

18.sizeFixed:2,在计算结果后保留的小数位数

19.fileType:"*.*",允许上传的文件类型

20.autoRemove:false,是否自动移除完成上传的记录

21.autoRemoveStoped:false,是否在停止的时候移除上传中的文件记录

22.postParams:{}可以将其他字段跟随上传文件一起传到后台

23.skin:"gray",皮肤样式:

24."gray","black",

25."blue","green",

26."orange","purple",

27."red"

28.progressStyle:"progressBar",//progressBar,percent进度显示效果

29.Percent:百分比

30.progressBar:进度条

4、效果图预览(1)

效果图预览(2)

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

下面是主要代码:(详细代码见class文件)

Java代码

1.DefaultFileRenamePolicyrename=generateFileRenamePolicy();

2.MultipartRequestmulti=null;

3.try{

4.multi=newMultipartRequest(request,parameters.getSaveDirectory(),parameters.getMaxPostSize(),parameters.getEncoding(),rename);

5.renderJson(response,Constant.UPLOAD_SUCCESS);

6.}catch(IOExceptione){

7.if(!BlankUtil.isBlank(e.getMessage())){

8.intindex=e.getMessage().indexOf("Postedcontentlengthof");

9.if(index>-1){

10.renderJson(response,Constant.FILE_OVERSETSIZE);

11.}else{

12.if(einstanceofIOException){

13.renderJson(response,Constant.IO_ERROR);

14.}else{

15.renderJson(response,Constant.UPLOAD_FAILED);

16.}

17.}

18.logger.error(e.getMessage(),e.getCause());

19.}else{

20.logger.info("---uploadfileuploaderror---");

21.deleteErrorFile(parameters.getSaveDirectory()+rename.getFileSaveName());

22.}

23.return;

24.}

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

web.xml中添加下面配置:

Java代码

1.<!--swfUploader-->

2.<servlet>

3.<servlet-name>swfUploader</servlet-name>

4.<servlet-class>com.upload.swf.SwfUploadServlet</servlet-class>

5.<!--上传的文件大小上限单位M-->

6.<init-param>

7.<param-name>FILE_SIZE_LIMIT</param-name>

8.<param-value>10</param-value>

9.</init-param>

10.<!--一次性上传的文件个数上限-->

11.<init-param>

12.<param-name>FILE_COUNT_LIMIT</param-name>

13.<param-value>10</param-value>

14.</init-param>

15.<!--请求响应编码格式-->

16.<init-param>

17.<param-name>ENCODING</param-name>

18.<param-value>utf-8</param-value>

19.</init-param>

20.<!--是否使用自定义目录-->

21.<init-param>

22.<param-name>USE_CUSTOMDIR</param-name>

23.<param-value>false</param-value>

24.</init-param>

25.<!--自定义的文件保存目录-->

26.<init-param>

27.<param-name>ROOT_UPLOADDIR</param-name>

28.<param-value>rootUpload</param-value>

29.</init-param>

30.</servlet>

31.<servlet-mapping>

32.<servlet-name>swfUploader</servlet-name>

33.<url-pattern>/swf/upload</url-pattern>

34.</servlet-mapping>

相关推荐

Web全栈笔记 / 0评论 2020-06-15