您的位置：首页 > Web前端 > JavaScript

JSP使用文件上传插件uploadify

2013-08-13 19:53 330 查看

在隔壁老王http://wallimn.iteye.com/blog/1663299的博客上看到使用这个插件的文章，手痒也跟着去官网下载个例子玩下，没想到最新版的API变了。。。

资源的下载地址猛击下载。。。PS:资源上传的JS没写好，在这已更正。

还是写出来跟大家一起学习下。

http://www.uploadify.com 官网

有三个文件是必须的jquery.uploadify.js，uploadify.css，uploadify.swf。本次实验是部署在myeclipse8.5下，需引入的JAR有三个commons.jar包：io、logging、fileupload。可在tomcat的lib目录下找。

index.jsp的文件如下

<%@ page language="java" import="java.util.*" pageEncoding="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>My JSP 'index.jsp' starting page</title>

<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
$(document).ready(
function() {
$("#uploadify").uploadify( {//初始化函数
'swf'      : 'uploadify/uploadify.swf',
'auto'     : false,//true为自动上传
'uploader' : 'servlet/Upload',
'multi' : true,
'buttonText' : '浏览',
'simUploadLimit' : 8
});

});
</script>
</head>

<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a> 
<a href="javascript:jQuery('#uploadify').uploadify('cancel','*')">取消所有上传</a>
</p>
</body>
</html>

其中变化较大的是上传文件的函数，为upload（）。

具体的参数可看jquery.uploadify.js，里面有详细的API说明

注意有三个属性是必须在初始化的时候赋值的，API那也有说明。

具体参数可参考

API的说明很详细。

接下来是SERVLET的。

package com.zcb.servlet;
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;
/**
*
* @author zhengchubin
*
*/
@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);
}
}

WEB.XML配置如下：

<servlet>
<servlet-name>upload</servlet-name>
<servlet-class>com.zcb.servlet.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航