搜索了一些關於批量上傳性能的問題，今天看到了uploadify
覺得特別的不錯，用jquery實現了批量的上傳功能，不僅強大，同時也實現了進度條的功能
稍稍做一點美化就非常棒的一個操作，下面就簡單的總結一下使用這個擴展應用的步驟
去官網上面下載query.uploadify.v2.1.4.js目前我用的最新的是這個版本，不過裏面的demo是php的
不過對於js框架的時候，既然php能用java也同樣可以，對着例子看了一些網上的例子，做了一個筆記詳細寫了一下部署過程：
創建了一個web project
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
首先把這兩個jar文件引入了path
然後創建了一個servlet
Upload.java（用的MyEclipse自動配置了web.xml部署描述符）
//Upload.java
package com.uploadify.servlet;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
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;
import com.uploadify.utils.IPTimeStamp;
public class Upload extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String savePath = this.getServletConfig().getServletContext()
.getRealPath("");
// 得到項目的工作目錄
savePath = savePath + "/uploads/";
File f1 = new File(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();
if (name == null || name.trim().equals("")) {
continue;
}
// 得到文件的擴展名
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 利用客戶端IP+時間+三位隨機數字生成非重複文件名：
name = new IPTimeStamp().getIPTimeStampRandom();
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);
}
}
//PTimeStamp.java
package com.uploadify.utils;
import java.net.InetAddress;
import java.net.UnknownHostException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
public class IPTimeStamp {
private String ip;
private Date date;
private SimpleDateFormat format;
public IPTimeStamp() {
try {
ip = InetAddress.getLocalHost().getHostAddress();
} catch (UnknownHostException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public String getTimeStamp() {
format = new SimpleDateFormat("yyyyMMddHHmmssSSS");
return format.format(new Date());
}
public String addZero(String str, int len) {
StringBuffer sb = new StringBuffer();
sb.append(str);
while (sb.length() < len) {
sb.insert(0, "0");
}
return sb.toString();
}
public String getIPTimeStampRandom() {
StringBuffer sb = new StringBuffer();
String[] ips = this.ip.split("\\.");
for (int j = 0; j < ips.length; j++) {
// System.out.println(ips[j]);
sb.append(this.addZero(ips[j], 3));
}
sb.append(this.getTimeStamp());
Random rod = new Random();
for (int i = 0; i < 3; i++) {
sb.append(rod.nextInt(10));
}
return sb.toString();
}
}
部署描述符
<!--web.xml-->
<?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.uploadify.servlet.Upload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Upload</servlet-name>
<url-pattern>/Upload</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
在WebROOT下面創建folder->js
放入解壓包裏面的
jquery.uploadify.v2.1.4.js
jquery.uploadify.v2.1.4.min.js
jquery-1.4.2.min.js
swfobject.js
css->
uploadify.css
images->
cancel.png<!--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>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify.swf',
'script' : 'Upload',
'cancelImg' : 'images/cancel.png',
'folder' : 'uploads',
'queueID' : 'fileQueue',
'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>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上傳</a>
</p>
</body>
</html>
驗證成功，相當漂亮
