jquery uploadify插件多文件上传
2013-07-21 09:34
651 查看
1、jquery uploadify 下载：http://www.uploadify.com/
2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify
3、配置项说明：
uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
onInit :做一些初始化的工作。
onSelect：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对 象，有name、size、creationDate、modificationDate、type 5个属性
onSelectOnce：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel :当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同
onSelect中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消 一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和 queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj 对象有type和info两个属性。
type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、 fileObj三个参数，参数的解释同上。
onProgress：点击上传时触发，如果auto设置为true则是选择文件时触发，如 果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有 event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、 bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、 fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两 个属性fileCount和speed
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传 的平均速率 kb/s
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参 数，data有四个属性，分别为：
filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和 uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍 的那些key值，如下面代码
$('#uploadify').uploadifySettings('folder','JS');
如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中 指定queueID的文件。
$('#uploadify').uploadifyCancel(id);
4、使用：
前台
Jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>uploadify-实例</title>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify/scripts/uploadify.swf',
'script' : 'UploadPhotoServlet',
'cancelImg' : 'uploadify/cancel.png',
'buttonImg' : 'uploadify/buttonImg.png',
'folder' : '/jxdBlog/photos',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'wmode' : 'transparent',
'simUploadLimit' : 999,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
'onAllComplete' :function(event,data)
{
$('#result').html(data.filesUploaded +'个图片上传成功');
}
});
});
</script>
<style type="text/css">
.inputcss
{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
border:solid 1px #CCCCCC;
}
.buttoncss
{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
background-color:#FFFFFF;
border:solid 1px #CCCCCC;
}
</style>
</head>
<body>
<table style="width: 90%;">
<tr>
<td style="width: 100px;">
<input type="file" name="uploadify" id="uploadify" />
</td>
<td align="left">
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
<span id="result" style="font-size: 13px;color: red"></span>
</td>
</tr>
</table>
<div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
</body>
</html>
后台：
这里需要用到commons-fileupload组件
所需要的包：
1、commons-fileupload-1.2.1.jar：
下载地址 http://commons.apache.org/downloads/download_fileupload.cgi
2、commons-io-1.4.jar：
下载地址 http://commons.apache.org/downloads/download_io.cgi
Java代码
/**
* 文件上传实例
* @author samLee
*
*/
public class UploadPhotoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public UploadPhotoServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//文件存放的目录
File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
if(!tempDirPath.exists()){
tempDirPath.mkdirs();
}
//创建磁盘文件工厂
DiskFileItemFactory fac = new DiskFileItemFactory();
//创建servlet文件上传组件
ServletFileUpload upload = new ServletFileUpload(fac);
//文件列表
List fileList = null;
//解析request从而得到前台传过来的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}
//保存后的文件名
String imageName = null;
//便利从前台得到的文件列表
Iterator<FileItem> it = fileList.iterator();
while(it.hasNext()){
FileItem item = it.next();
//如果不是普通表单域，当做文件域来处理
if(!item.isFormField()){
imageName = new Date().getTime()+Math.random()*10000+item.getName();
BufferedInputStream in = new BufferedInputStream(item.getInputStream());
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File(tempDirPath+"\\"+imageName)));
Streams.copy(in, out, true);
}
}
//
PrintWriter out = null;
try {
out = encodehead(request, response);
} catch (IOException e) {
e.printStackTrace();
}
//这个地方不能少，否则前台得不到上传的结果
out.write("1");
out.close();
}
/**
* Ajax辅助方法 获取 PrintWriter
* @return
* @throws IOException
* @throws IOException
* request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
*/
private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
return response.getWriter();
}
}
script： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript：用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径
fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的 数据。默认为Filedata
method： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ：上传文件存放的目录 。
queueID ：文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ：当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ：设置为true时可以上传多个文件。
auto ：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”
fileExt ：设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ：上传文件的大小限制 。
simUploadLimit ：允许同时上传的个数 默认值：1 。
buttonText ：浏览按钮的文本，默认值：BROWSE 。
buttonImg ：浏览按钮的图片的路径 。
hideButton ：设置为true则隐藏浏览按钮的图片 。
rollover ：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ：设置浏览按钮的宽度 ，默认值：110。
height ：设置浏览按钮的高度 ，默认值：30。
wmode ：设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify
3、配置项说明：
uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
onInit :做一些初始化的工作。
onSelect：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对 象，有name、size、creationDate、modificationDate、type 5个属性
onSelectOnce：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel :当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同
onSelect中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消 一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
onClearQueue：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和 queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj 对象有type和info两个属性。
type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、 fileObj三个参数，参数的解释同上。
onProgress：点击上传时触发，如果auto设置为true则是选择文件时触发，如 果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有 event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、 bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、 fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两 个属性fileCount和speed
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传 的平均速率 kb/s
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参 数，data有四个属性，分别为：
filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和 uploadifyClearQueue两个函数，除此之外还有几个函数：
uploadifySettings：可以动态修改上面介绍 的那些key值，如下面代码
$('#uploadify').uploadifySettings('folder','JS');
如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中
<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()"> 上传</a>uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中 指定queueID的文件。
$('#uploadify').uploadifyCancel(id);
4、使用：
前台
Jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>uploadify-实例</title>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify/scripts/uploadify.swf',
'script' : 'UploadPhotoServlet',
'cancelImg' : 'uploadify/cancel.png',
'buttonImg' : 'uploadify/buttonImg.png',
'folder' : '/jxdBlog/photos',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'wmode' : 'transparent',
'simUploadLimit' : 999,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
'onAllComplete' :function(event,data)
{
$('#result').html(data.filesUploaded +'个图片上传成功');
}
});
});
</script>
<style type="text/css">
.inputcss
{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
border:solid 1px #CCCCCC;
}
.buttoncss
{
color:#333333;
font-family: "Tahoma";
font-size: 12px;
background-color:#FFFFFF;
border:solid 1px #CCCCCC;
}
</style>
</head>
<body>
<table style="width: 90%;">
<tr>
<td style="width: 100px;">
<input type="file" name="uploadify" id="uploadify" />
</td>
<td align="left">
<a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
<span id="result" style="font-size: 13px;color: red"></span>
</td>
</tr>
</table>
<div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
</body>
</html>
后台：
这里需要用到commons-fileupload组件
所需要的包：
1、commons-fileupload-1.2.1.jar：
下载地址 http://commons.apache.org/downloads/download_fileupload.cgi
2、commons-io-1.4.jar：
下载地址 http://commons.apache.org/downloads/download_io.cgi
Java代码
/**
* 文件上传实例
* @author samLee
*
*/
public class UploadPhotoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public UploadPhotoServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//文件存放的目录
File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
if(!tempDirPath.exists()){
tempDirPath.mkdirs();
}
//创建磁盘文件工厂
DiskFileItemFactory fac = new DiskFileItemFactory();
//创建servlet文件上传组件
ServletFileUpload upload = new ServletFileUpload(fac);
//文件列表
List fileList = null;
//解析request从而得到前台传过来的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}
//保存后的文件名
String imageName = null;
//便利从前台得到的文件列表
Iterator<FileItem> it = fileList.iterator();
while(it.hasNext()){
FileItem item = it.next();
//如果不是普通表单域，当做文件域来处理
if(!item.isFormField()){
imageName = new Date().getTime()+Math.random()*10000+item.getName();
BufferedInputStream in = new BufferedInputStream(item.getInputStream());
BufferedOutputStream out = new BufferedOutputStream(
new FileOutputStream(new File(tempDirPath+"\\"+imageName)));
Streams.copy(in, out, true);
}
}
//
PrintWriter out = null;
try {
out = encodehead(request, response);
} catch (IOException e) {
e.printStackTrace();
}
//这个地方不能少，否则前台得不到上传的结果
out.write("1");
out.close();
}
/**
* Ajax辅助方法 获取 PrintWriter
* @return
* @throws IOException
* @throws IOException
* request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
*/
private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
return response.getWriter();
}
}
script： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript：用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径
fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的 数据。默认为Filedata
method： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ：上传文件存放的目录 。
queueID ：文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ：当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ：设置为true时可以上传多个文件。
auto ：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”
fileExt ：设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ：上传文件的大小限制 。
simUploadLimit ：允许同时上传的个数 默认值：1 。
buttonText ：浏览按钮的文本，默认值：BROWSE 。
buttonImg ：浏览按钮的图片的路径 。
hideButton ：设置为true则隐藏浏览按钮的图片 。
rollover ：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ：设置浏览按钮的宽度 ，默认值：110。
height ：设置浏览按钮的高度 ，默认值：30。
wmode ：设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
cancelImg：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- jquery插件 jsp+servlet+uploadify3.1 文件上传
- asp.net配置web.config支持jQuery.Uploadify插件上传大文件
- jquery uploadify 多文件上传插件 使用经验
- 关于文件上传jQuery插件jquery.uploadify的使用心得
- JQuery.Uploadify asp.net(C#)文件,多文件上传插件, Session 获取不到等错误
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- Jquery.Uploadify 上传文件插件的使用
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- jquery uploadify插件多文件上传
- jquery插件 jsp+servlet+uploadify3.1 文件上传
- jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件
- 详解jQuery uploadify文件上传插件的使用方法
- jquery uploadify插件多文件上传
- jquery uploadify插件多文件上传
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- Jquery Uploadify插件+Servlet解决FTP多文件上传
- jquery.uploadify插件与java web的结合实现多文件上传+进度条
- 详解jQuery uploadify文件上传插件的使用方法
- jquery uploadify文件上传插件用法精析