要求：
- jQuery 1.4.x 或 更高
- Flash Player 9.0.24 或 更高
- 可以运行在服务端的开发语言，如PHP，ASP.NET或JAVA
前端实现：
1. 下载Uploadify Zip Package，它是免费的。
2. 解压zip包，包中有如下文件：
jquery.uplodify-3.1.min.js
uplodify.php
uploadify.swf
uploadify.css
uploadify-cancel.png
check-exists.php（用于检测文件是否已经存在）
3. 添加jquery支持
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
4. 添加uploadify的CSS文件到head标签中
<link rel="stylesheet"type="text/css"href="css/uploadify.css"/>
5. 添加uploadify插件支持
<script type="text/javascript" src="scripts/jquery.uploadify-3.1.min.js"></script>
6. 添加dom结构到html文件中
<input type="file"name="file_upload"id="file_upload"/>
7. 添加如下代码到</body>之前
<script type=”text/javascript”>
$(function() {
$('#file_upload').uploadify({
'swf' : 'flash/uploadify.swf', // 必须要有的，flash帮助我们与后端交互数据
'uploader' : 'uploadify/upload' // 处理文件上传处理地址
// Put your options here // 其他参数
});
});
</script>
后端实现：
1. UploadServlet：该Sevlet会将上传的文件存到项目下的store文件中，eclipse并不会存放在实际项目的store，而是存放到临时项目的store中。
/**
* 处理文件上传的post
* 下方的类名出自包import org.apache.commons.fileupload.*,开始搞错了老是报错
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Configure a repository (to ensure a secure temp location is used)
ServletContext servletContext = this.getServletConfig().getServletContext();
File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
// Set factory constraints
//factory.setSizeThreshold(yourMaxMemorySize);
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
boolean multipartContent = upload.isMultipartContent(request);
// Set overall request size constraint
//upload.setSizeMax(yourMaxRequestSize);
if(multipartContent) {
// Parse the request
try {
List<FileItem> items = upload.parseRequest(request);
// Process the uploaded items
Iterator<FileItem> iter = items.iterator();
while (iter.hasNext()) {
FileItem item = iter.next();
if (item.isFormField()) {
processFormField(item);
} else {
processUploadedFile(item);
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
response.getWriter().print("success");
} else {
response.getWriter().print("file upload format is wrong!");
}
}
private void processUploadedFile(FileItem item) {
// Process a file upload
if (!item.isFormField()) {
String fieldName = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
String storePath = this.getServletContext().getRealPath("/store");
File uploadedFile = new File(storePath + "/" + fileName);
if(!uploadedFile.exists()) {
try {
item.write(uploadedFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
private void processFormField(FileItem item) {
// Process a regular form field
if (item.isFormField()) {
String name = item.getFieldName();
String value = item.getString();
}}
2. checkExistSvl：
/**
* 检测文件是否存在post
*/
protected void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
// post中携带filename参数
String fileName = req.getParameter("filename");
String storePath = this.getServletContext().getRealPath("/store");
File file = new File(storePath + "/" + fileName);
// 存在返回1， 不存在返回0，处理由前端处理
if(file.exists()) {
res.getWriter().print("1");
} else {
res.getWriter().print("0");
}
}
3. web.xml：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>MultiFileUpload</display-name>
<!-- 处理文件的Servlet -->
<servlet>
<servlet-name>upload</servlet-name>
<servlet-class>com.by.upload.Upload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>upload</servlet-name>
<url-pattern>/uploadify/upload</url-pattern>
</servlet-mapping>
<!-- 处理检查文件是否已经存在的Servlet -->
<servlet>
<servlet-name>checkExistSvl</servlet-name>
<servlet-class>com.by.upload.checkExistSvl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkExistSvl</servlet-name>
<url-pattern>/uploadify/checkExist</url-pattern>
</servlet-mapping>
<!-- 欢迎文件 -->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
项目的目录结构图：
uploadify属性：src：服务端程序
css：样式文件
flash：flash文件
img：图片文件
scripts：脚本文件
store：存储上传文件，但是在eclipse中不会存放到这里，而是存放到workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\MultiFileUpload\store中
lib：使用apache提供的两个jar包
index.jsp：主页面
|
属性名 |
说明 |
|
auto |
true|false：是否自动上传文件 |
|
buttonClass |
添加浏览按钮新样式 |
|
buttonCursor |
arrow|hand：鼠标hover浏览时，处理效果，arrow明暗交替，hand手型 |
|
buttonImage |
新浏览按钮的图片地址 |
|
buttonText |
浏览按钮新文本内容 |
|
checkExisting |
检测文件是否存在的处理地址 |
|
debug |
true|false：是否启用debug模式 |
|
fileObjName |
设置服务器端文件名称，名称存放在后端的item.getFieldName()中 |
|
fileSizeLimit |
限制上传文件的大小，默认是KB |
|
fileTypeDesc |
上传文件的描述 |
|
fileTypeExts |
限制上传文件的类型，如*.jpg;*.png; |
|
formData |
附带的其他参数key:value |
|
height |
浏览按钮的高度，默认px |
|
itemTemplate |
提供了四个数值关于上传的信息，并提供呈现html代码 |
|
method |
post|get：指定get还是method方法 |
|
multi |
true|false：是否多文件上传 |
|
overrideEvents |
Array:使哪些方法失效 |
|
preventCaching |
true|false：是否缓存一个random编码，建议禁用 |
|
progressData |
percentage|speed：上传进度显示效果 |
|
queueID |
显示上传进度信息的区域ID |
|
queueSizeLimit |
number：限制区域内上传文件的个数 |
|
removeCompleted |
true|false：上传成功的文件是否隐藏 |
|
removeTimeout |
number：延迟几秒删除上传成功的文件 |
|
requeueErrors |
true|false：当上传出现error时，是否尝试重新上传 |
|
successTimeout |
number：文件成功后，延迟响应 |
|
swf |
swf路径 |
|
uploader |
文件上传处理地址 |
|
uploadLimit |
最大的上传文件个数 |
|
width |
浏览按钮的宽度 |
uploadify事件：
|
事件 |
说明 |
|
onCancel |
取消上传文件时执行 |
|
onClearQueue |
当执行取消全部上传文件时执行，$('#file_upload').uploadify('cancel','*'); |
|
onDestory |
禁用上传功能时执行，$('#file_upload').uploadify('destory'); |
|
onDialogClose |
浏览对话框关闭时执行，函数包含如下参数： Arguments：queueData
|
|
onDialogOpen |
打开浏览对话框时执行，但效果等到关闭之后才能看到 |
|
onDisable |
禁用文件上传公共时执行，$('#file_upload').uploadify('disable', true); |
|
onEnable |
启用文件上传功能时执行，$('#file_upload').uploadify('disable', false); |
|
onFallback |
flash不支持时执行 |
|
onInit |
初始化时执行 |
|
onQueueComplete |
所有文件被添加到上传框中，无论成功还是取消操作，完成时执行，函数包括如下参数： Arguments : queueData
|
|
onSelect |
文件被选择到对话框中时执行 |
|
onSelectError |
文件被选择到对话框出现错误时执行，函数包含如下参数： Arguments：file
|
|
onSWFReady |
swf文件加载成功后执行 |
|
onUploadComplete |
每个文件成功加载到服务端时执行，函数包含如下参数： Arguments：file
|
|
onUploadError |
每个文件加载到服务端出现错误时执行，函数包含如下参数： Arguments：file
|
|
onUploadProgress |
当文件上传进度变化时执行，函数如下参数： Arguments：file
|
|
onUploadStart |
文件上传之前时执行，函数包括如下参数： Arguments：file
|
|
onUploadSuccess |
当文件成功上传时执行，函数包含如下参数： Arguments：file |
uploadify方法：
|
方法 |
说明 |
|
cancel |
取消上传文件 $('#file_upload').uploadify(‘cancel’, ‘fileId’); 或 $('#file_upload').uploadify(‘cancel’, ‘*’); |
|
destroy |
释放uploadify实例，$('#file_upload').uploadify(‘destory’); |
|
disable |
启用或禁用上传功能 $('#file_upload').uploadify(‘disable’, true); 或 $('#file_upload').uploadify(‘disable’, false); |
|
settings |
设置或设置uploadify属性值 $('#file_upload').uploadify(‘settings’, ‘buttonText’, ‘Changed’); 或 $('#file_upload').uploadify(‘settings’, ‘buttonText’); |
|
stop |
暂停上传文件操作 $('#file_upload').uploadify(‘stop’); |
|
upload |
开始上传文件操作 $('#file_upload').uploadify(‘upload’); |
代码托管：
https://github.com/jason1213/Uploadify-Java