要求:
- 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