JQuery上传插件Uploadify使用详解struts2+uploadify+jquery.docx

JQuery上传插件Uploadify使用详解struts2+uploadify+jquery.docx

《JQuery上传插件Uploadify使用详解struts2+uploadify+jquery.docx》由会员分享，可在线阅读，更多相关《JQuery上传插件Uploadify使用详解struts2+uploadify+jquery.docx（20页珍藏版）》请在冰豆网上搜索。

JQuery上传插件Uploadify使用详解struts2+uploadify+jquery

JQuery上传插件Uploadify使用详解【struts2+uploadify+jquery】

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。

不过官方提供的实例时php版本的，本文将详细介绍Uploadify在java中结合struts2的使用，您也可以点击下面的链接进行演示或下载。

∙官方下载

∙官方文档

∙官方演示

效果图如下

action代码

[java] viewplaincopyprint?

1.package net.itcast.action;  

2.  

3.import java.io.File;  

4.import java.util.ArrayList;  

5.import java.util.List;  

6.import net.itcast.util.DateUtil;  

7.import mons.io.FileUtils;  

8.import org.apache.struts2.ServletActionContext;  

9.import com.opensymphony.xwork2.ActionSupport;  

10.  

11.@SuppressWarnings（"serial"）  

12.public class UploadifyAction extends ActionSupport  

13.{  

14.    /* 

15.     * 成员变量的名称不能随意更改,  

16.     * private File file;           变量的名称必须和jsp中上传文件标签中的name属性的值一致. 

17.     * private String fileFileName;     变量的名称必须为"上传文件的名称+FileName". 

18.     * private String fileContentType;  变量的名称必须为"上传文件的名称+ContentType",  

19.     */  

20.    private List file;  

21.  

22.    private List fileFileName;  

23.  

24.    private List fileContentType;  

25.      

26.    private List newImgPath = new ArrayList（）;  

27.  

28.    @SuppressWarnings（"deprecation"）  

29.    public String upload（） throws Exception  

30.    {  

31.        for（int i=0;i

32.        {  

33.            String root = ServletActionContext.getRequest（）.getRealPath（"/upload"）;  

34.              

35.            int idx = fileFileName.get（i）.lastIndexOf（"."）;    

36.            //文件后缀    

37.            String extention= fileFileName.get（i）.substring（idx）;    

38.            String time = DateUtil.getCurrDate（"yyyyMMddHHmmssSSS"）;  

39.            //新的文件名（日期+后缀）    

40.            String newPath = time + extention;   

41.              

42.            newImgPath.add（newPath）;  

43.  

44.            File destFile = new File（root, newPath）;  

45.              

46.            FileUtils.copyFile（file.get（i）, destFile）;     

47.        }  

48.        return "uploadify";  

49.    }  

50.    public List getFile（） {  

51.        return file;  

52.    }  

53.    public void setFile（List file） {  

54.        this.file = file;  

55.    }  

56.    public List getFileFileName（） {  

57.        return fileFileName;  

58.    }  

59.    public void setFileFileName（List fileFileName） {  

60.        this.fileFileName = fileFileName;  

61.    }  

62.    public List getFileContentType（） {  

63.        return fileContentType;  

64.    }  

65.    public void setFileContentType（List fileContentType） {  

66.        this.fileContentType = fileContentType;  

67.    }  

68.    public List getNewImgPath（） {  

69.        return newImgPath;  

70.    }  

71.    public void setNewImgPath（List newImgPath） {  

72.        this.newImgPath = newImgPath;  

73.    }  

74.}  

struts22.xml配置

[html] viewplaincopyprint?

1.    

2.            

3.              

4.                file,fileContentType,fileFileName  

5.                 

6.           

7.    

jsp页面

[html] viewplaincopyprint?

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.  

5.  

6.<%pageContext.setAttribute（"baseURL", request.getContextPath（））; %>  

7.  

8.  

9.  

10.  

11.  

12.  

13.  

14.  

15.    div.show{  

16.        width:

800px;  

17.        height:

250px;  

18.        border:

1px solid #666;  

19.    }  

20.    ul,li {  

21.        margin:

 0;  

22.        padding:

 0;  

23.        list-style:

 none;  

24.    }  

25.    div.show ul li{  

26.        float:

left;  

27.        margin-left:

10px;  

28.    }  

29.    

30.  

31.    

32.    $（function（） {  

33.        $（"#upload"）.button（{  

34.            icons:

{  

35.                primary:

 "ui-icon-play"  

36.            }  

37.        }）;  

38.        $（"#cancel"）.button（{  

39.            icons:

{  

40.                primary:

 "ui-icon-cancel"  

41.            }  

42.        }）;  

43.        $（"#uploadFile"）.uploadify（{    

44.            swf:

 '${baseURL}/js/uploadify/uploadify.swf',   //[必须设置]swf的路径  

45.            uploader:

 '${baseURL}/uploadify!

upload.action', //[必须设置]上传文件触发的url  

46.            width:

 120,                     //设置浏览按钮的宽度 ，默认值：

120  

47.            height:

25,                  //设置浏览按钮的高度， 默认值：

30。

48.            fileObjName:

'file',                 //上传文件name  

49.            auto:

 false,                    //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传  

50.            buttonText:

 '选择文件' ,            //浏览按钮的文本，默认值：

BROWSE   

51.            multi:

 true,                    //设置为true时可以上传多个文件  

52.            queueID:

 'some_file_queue',             //文件队列的ID，该ID与存放文件队列的div的ID一致  

53.            fileTypeExts:

'*.jpg;*.jpge;*.gif;*.png',    //允许上传的文件后缀    

54.            fileSizeLimit:

'1MB',                //上传文件的大小限制    

55.            queueSizeLimit:

 5,                  //上传数量    

56.            progressData :

 'all',                   //队列中显示文件上传进度的方式：

all-上传速度+百分比，percentage-百分比，speed-上传速度  

57.            removeCompleted :

 true,             //上传成功后的文件，是否在队列中自动删除  

58.            method:

'post',                  //和后台交互的方式：

post/get  

59.            onUploadSuccess:

 function（file, data, response）{  

60.                    /* alert（ 'id:

 ' + file.id+ ' - 索引:

 ' + file.index+ ' - 文件名:

 ' + file.name  

61.                    + ' - 文件大小:

 ' + file.size+ ' - 类型:

 ' + file.type+ ' - 创建日期:

 ' + file.creationdate  

62.                    + ' - 修改日期:

 ' + file.modificationdate+ ' - 文件状态:

 ' + file.filestatus+ ' - 服务器端消息:

 ' + data  

63.                    + ' - 是否上传成功:

 ' + response）; */  

64.                    var url = eval（'（' + data + '）'）;    

65.                    $（"div.show ul"）.append（"