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

a137268431

浏览: 145333 次

最近访客更多访客>>

DeilSky

lesliehanhan

fireflybird

suncong1024

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (245)

社区版块

存档分类

2014-02 ( 53)
2014-01 ( 69)
2013-12 ( 120)
更多存档...

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

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

1、初始化页面：

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

2、选择多个文件（可一次多选）后：

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

3、点击开始上传（上传完就自动消失）

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

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

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

2、项目结构：

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

3、关键代码：

index.jsp

01

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

02

<%

03

String
 path = request.getContextPath();

04

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

05

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

06

+
 path + "/";

07

%>

08

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

09

<html>

10

<head>

11

<basehref="<%=basePath%>">

12

<title>Upload</title>

13

14

<!--装载文件-->

15

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

16

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

17

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

18

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

19

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

20

21

<!--ready事件-->

22

<scripttype="text/javascript">

23

$(document).ready(function()
 {

24

$("#uploadify").uploadify({

25

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

26

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

27

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

28

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

29

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

30

'queueSizeLimit'
 : 5,

31

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

32

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

33

'auto'
 : false,

34

'multi'
 : true,

35

'simUploadLimit'
 : 2,

36

'buttonText'
 : 'BROWSE'

37

});

38

});

39

</script>

40

</head>

41

42

<body>

43

<divid="fileQueue"></div>

44

<inputtype="file"name="uploadify"id="uploadify"/>

45

<p>

46

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

47

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

48

</p>

49

</body>

50

</html>

web.xml

01

<?xmlversion="1.0"encoding="UTF-8"?>

02

03

<web-appversion="2.4"

04

05

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

06

07

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

08

09

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

10

11

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

12

13

<servlet>

14

15

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

16

17

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

18

19

</servlet>

20

21

<servlet-mapping>

22

23

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

24

25

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

26

27

</servlet-mapping>

28

29

<welcome-file-list>

30

31

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

32

33

</welcome-file-list>

34

35

</web-app>

Upload.java

001

packagecom.xzit.upload;

002

003

importjava.io.File;

004

005

importjava.io.IOException;

006

007

importjava.util.Iterator;

008

009

importjava.util.List;

010

011

importjava.util.UUID;

012

013

014

015

importjavax.servlet.ServletException;

016

017

importjavax.servlet.http.HttpServlet;

018

019

importjavax.servlet.http.HttpServletRequest;

020

021

importjavax.servlet.http.HttpServletResponse;

022

023

024

025

importorg.apache.commons.fileupload.FileItem;

026

027

importorg.apache.commons.fileupload.FileUploadException;

028

029

importorg.apache.commons.fileupload.disk.DiskFileItemFactory;

030

031

importorg.apache.commons.fileupload.servlet.ServletFileUpload;

032

033

034

035

@SuppressWarnings("serial")

036

037

publicclassUploadextendsHttpServlet
 {

038

039

@SuppressWarnings("unchecked")

040

041

publicvoiddoPost(HttpServletRequest
 request, HttpServletResponse response)

042

043

throwsServletException,
 IOException {

044

045

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

046

047

.getRealPath("");

048

049

savePath
 = savePath +"/uploads/";

050

051

File
 f1 =newFile(savePath);

052

053

System.out.println(savePath);

054

055

if(!f1.exists())
 {

056

057

f1.mkdirs();

058

059

}

060

061

DiskFileItemFactory
 fac =newDiskFileItemFactory();

062

063

ServletFileUpload
 upload =newServletFileUpload(fac);

064

065

upload.setHeaderEncoding("utf-8");

066

067

List
 fileList =null;

068

069

try{

070

071

fileList
 = upload.parseRequest(request);

072

073

}catch(FileUploadException
 ex) {

074

075

return;

076

077

}

078

079

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

080

081

String
 name ="";

082

083

String
 extName ="";

084

085

while(it.hasNext())
 {

086

087

FileItem
 item = it.next();

088

089

if(!item.isFormField())
 {

090

091

name
 = item.getName();

092

093

longsize
 = item.getSize();

094

095

String
 type = item.getContentType();

096

097

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

098

099

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

100

101

continue;

102

103

}

104

105

//扩展名格式：

106

107

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

108

109

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

110

111

}

112

113

File
 file =null;

114

115

do{

116

117

//生成文件名：

118

119

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

120

121

file
 =newFile(savePath
 + name + extName);

122

123

}while(file.exists());

124

125

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

126

127

try{

128

129

item.write(saveFile);

130

131

}catch(Exception
 e) {

132

133

e.printStackTrace();

134

135

}

136

137

}

138

139

}

140

141

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

142

143

}

144

145

}