专注JavaWeb开发 首页制式『默认式 OR 时间轴 网站地图|RSS订阅|设为首页|加入收藏
当前位置:首页 >Java >JavaEE初级 > 正文

JQuery Uploadify 基于JSP的无刷新上传实例

来源: IT江湖 作者: IT江湖 发布时间: 2015-04-01 浏览次数:

项目需要实现一个无刷新批量文件上传功能,仔细研究了下,发现JQuery 提供的Uploadify插件十分不错,不过官方的实例是基于php的,下面我用jsp+servlet简单实现了这个功能,废话少说,先看效果图:

1、初始化页面:

JQuery Uploadify 基于JSP的无刷新上传实例 - 第1张  | IT江湖

2、选择多个文件(可一次多选)后:

JQuery Uploadify 基于JSP的无刷新上传实例 - 第2张  | IT江湖


3、点击开始上传(上传完就自动消失)

JQuery Uploadify 基于JSP的无刷新上传实例 - 第3张  | IT江湖


效果就是上面那样,页面不刷新。下面上代码:

1、首先先到官网下载最新的zip压缩包http://www.uploadify.com

2、项目结构:

JQuery Uploadify 基于JSP的无刷新上传实例 - 第4张  | IT江湖

3、关键代码:

index.jsp


Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>Upload</title>

 

<!--装载文件-->

<link href="css/default.css" rel="stylesheet" type="text/css" />

<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="scripts/swfobject.js"></script>

<script type="text/javascript" src="scripts/jquery.uploadify.v2.1.4.min.js"></script>

 

<!--ready事件-->

<script type="text/javascript">

$(document).ready(function() {

$("#uploadify").uploadify({

'uploader' : 'scripts/uploadify.swf',

'script' : 'servlet/Upload',//后台处理的请求

'cancelImg' : 'images/cancel.png',

'folder' : 'uploads',//您想将文件保存到的路径

'queueID' : 'fileQueue',//与下面的id对应

'queueSizeLimit' : 5,

'fileDesc' : 'rar文件或zip文件',

'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc

'auto' : false,

'multi' : true,

'simUploadLimit' : 2,

'buttonText' : 'BROWSE'

});

});

</script>

</head>

 

<body>

<div id="fileQueue"></div>

<input type="file" name="uploadify" id="uploadify" />

<p>

<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;

<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>

</p>

</body>

</html>


web.xml


Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<?xml version="1.0" encoding="UTF-8"?>

 

<web-app version="2.4"

 

    xmlns="http://java.sun.com/xml/ns/j2ee"

 

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 

    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

 

    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 

 

  <servlet>

 

    <servlet-name>upload</servlet-name>

 

    <servlet-class>com.xzit.upload.Upload</servlet-class>

 

  </servlet>

 

  <servlet-mapping>

 

    <servlet-name>upload</servlet-name>

 

    <url-pattern>/servlet/Upload</url-pattern>

 

  </servlet-mapping>

 

  <welcome-file-list>

 

    <welcome-file>index.jsp</welcome-file>

 

  </welcome-file-list>

 

</web-app>


Upload.java


Java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

package com.xzit.upload;

 

import java.io.File;

 

import java.io.IOException;

 

import java.util.Iterator;

 

import java.util.List;

 

import java.util.UUID;

 

 

 

import javax.servlet.ServletException;

 

import javax.servlet.http.HttpServlet;

 

import javax.servlet.http.HttpServletRequest;

 

import javax.servlet.http.HttpServletResponse;

 

 

 

import org.apache.commons.fileupload.FileItem;

 

import org.apache.commons.fileupload.FileUploadException;

 

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

 

import org.apache.commons.fileupload.servlet.ServletFileUpload;

 

 

 

@SuppressWarnings("serial")

 

public class Upload extends HttpServlet {

 

    @SuppressWarnings("unchecked")

 

    public void doPost(HttpServletRequest request, HttpServletResponse response)

 

            throws ServletException, IOException {

 

        String savePath = this.getServletConfig().getServletContext()

 

                .getRealPath("");

 

        savePath = savePath + "/uploads/";

 

        File f1 = new File(savePath);

 

        System.out.println(savePath);

 

        if (!f1.exists()) {

 

            f1.mkdirs();

 

        }

 

        DiskFileItemFactory fac = new DiskFileItemFactory();

 

        ServletFileUpload upload = new ServletFileUpload(fac);

 

        upload.setHeaderEncoding("utf-8");

 

        List fileList = null;

 

        try {

 

            fileList = upload.parseRequest(request);

 

        } catch (FileUploadException ex) {

 

            return;

 

        }

 

        Iterator<FileItem> it = fileList.iterator();

 

        String name = "";

 

        String extName = "";

 

        while (it.hasNext()) {

 

            FileItem item = it.next();

 

            if (!item.isFormField()) {

 

                name = item.getName();

 

                long size = item.getSize();

 

                String type = item.getContentType();

 

                System.out.println(size + " " + type);

 

                if (name == null || name.trim().equals("")) {

 

                    continue;

 

                }

 

                //扩展名格式: 

 

                if (name.lastIndexOf(".") >= 0) {

 

                    extName = name.substring(name.lastIndexOf("."));

 

                }

 

                File file = null;

 

                do {

 

                    //生成文件名:

 

                    name = UUID.randomUUID().toString();

 

                    file = new File(savePath + name + extName);

 

                } while (file.exists());

 

                File saveFile = new File(savePath + name + extName);

 

                try {

 

                    item.write(saveFile);

 

                } catch (Exception e) {

 

                    e.printStackTrace();

 

                }

 

            }

 

        }

 

        response.getWriter().print(name + extName);

 

    }

 

}




QQ群: 武汉地区(142173356)验证消息JavaWeb1024

网友共有【】评论,点击查看



x 微信关注我们 随时获取最新网站资讯