参考:
http://960432397.iteye.com/blog/2038345
JQuery的Uploadify实现多文件上传,支持限制文件大小等,最基本的jsp+servlet方式。
本文例子下载:
http://download.csdn.net/detail/liangbinny/8320481
项目图:
首页 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>文件上传</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 rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function(){
$("#uploadify").uploadify({
'debug' : false, //开启调试
'auto' : false, //是否自动上传
'swf' : 'uploadify/uploadify.swf', //引入uploadify.swf
'uploader' : 'upload',//请求路径
'queueID' : 'fileQueue',//队列id,用来展示上传进度的
'width' : '75', //按钮宽度
'height' : '24', //按钮高度
'queueSizeLimit' : 3, //同时上传文件的个数
'fileTypeDesc' : '视频文件', //可选择文件类型说明
'fileTypeExts' : '*.jpg;*.gif', //控制可上传文件的扩展名
'multi' : true, //允许多文件上传
'buttonText' : '图片上传',//按钮上的文字
'fileSizeLimit' : '2MB', //设置单个文件大小限制
'fileObjName' : 'uploadify', //<input type="file"/>的name
'method' : 'post',
'removeCompleted' : true,//上传完成后自动删除队列
'onFallback':function(){
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
},
'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发
//data就是action中返回来的数据
},'onQueueComplete' : function(){//所有文件上传完成
alert("文件上传成功!");
}
});
});
</script>
</head>
<body>
<input type="file" id="uploadify" name="uploadify">
<div id="fileQueue"></div>
<a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>
<a href="javascript:$('#uploadify').uploadify('cancel','*')">取消所有上传</a>
</body>
</html>
UploadServlet.java
package com.liangbinny.upload;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
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.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = -5036264969905378310L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// 设置接收的编码格式
request.setCharacterEncoding("UTF-8");
Date date = new Date();// 获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
SimpleDateFormat sdfFolderName = new SimpleDateFormat("yyyyMMdd");
String newfileName = sdfFileName.format(date);// 存放文件名称
String newFolderName = sdfFolderName.format(date); //存放文件夹名
String fileRealPath = "";// 文件存放真实地址
String fileRealResistPath = "";// 文件存放真实相对路径
// 获得容器中上传文件夹所在的物理路径
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "\\" + "uploads\\" + newFolderName + "\\";
System.out.println("上传文件存放路径" + savePath + "; ");
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdirs();
}
try {
// 名称 界面编码 必须 和request 保存一致..否则乱码
String firstFileName = "";
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
Object obit = it.next();
if (obit instanceof DiskFileItem) {
DiskFileItem item = (DiskFileItem) obit;
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName = item.getName().substring(item.getName().lastIndexOf("\\") + 1); //上传的源文件名
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));// 获取文件后缀名
fileRealPath = savePath + newfileName + formatName;// 文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
// 上传成功,则插入数据库
if (new File(fileRealPath).exists()) {
// 相对路径赋值
fileRealResistPath = "uploads/" + newFolderName + "/" + fileRealPath.substring(fileRealPath.lastIndexOf("\\") + 1);
// 保存到数据库
System.out.println("处理的文件名:" + fileName);
System.out.println("存放的相对路径:" + fileRealResistPath);
}
}
}
}
} catch (org.apache.commons.fileupload.FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
response.getWriter().write("1");
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>FileUpload</servlet-name>
<servlet-class>com.liangbinny.upload.UploadServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FileUpload</servlet-name>
<url-pattern>/upload</url-pattern>
</servlet-mapping>
</web-app>
运行例子:
Uploadify 3.2 参数属性、事件、方法函数详解
http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html