Uploadify是一个Jquery框架下处理批量文件上传的插件，支持多种服务器端软件。
官网：http://www.uploadify.com/
文档：http://www.uploadify.com/documentation/
今天根据文档写了个批量上传的的功能..
下面直接进入主题：
界面效果：
界面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Uploadify上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#file_upload").uploadify({
'height' : 27,
'width' : 80,
'buttonText' : '浏 览',
'swf' : '<%=path%>/uploadify/uploadify.swf',
'uploader' : '<%=path%>/servlet/UploadifySerlet',
'auto' : false,
'fileTypeExts' : '*.xls',
'formData' : {'userName':'','qq':''},
'onUploadStart' : function(file) {
//校验
var name=$('#userName').val();
if(name.replace(/\s/g,'') == ''){
alert("名称不能为空！");
return false;
}
//校验
var qq=$('#qq').val();
if(qq.replace(/\s/g,'') == ''){
alert("QQ不能为空！");
return false;
}
$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
//$("#file_upload").uploadify("settings", "qq", );
}
});
});
</script>
</head>
<body>
名称: <input type="text" id="userName" name="userName" value="妞见妞爱">
<br>
QQ: <input type="text" id="qq" name="qq" value="609865047">
<br>
<input type="file" name="uploadify" id="file_upload" />
<hr>
<a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a>
</body>
</html>
关于各个参数的介绍，网上也有很多。。我们也可以在 jquery.uploadify-3.1.js 中找到。
var settings = $.extend({
// Required Settings
id : $this.attr('id'), // The ID of the DOM object
swf : 'uploadify.swf', // The path to the uploadify SWF file
uploader : 'uploadify.php', // The path to the server-side upload script
// Options
auto : true, // Automatically upload files when added to the queue
buttonClass : '', // A class name to add to the browse button DOM object
buttonCursor : 'hand', // The cursor to use with the browse button
buttonImage : null, // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button
buttonText : 'SELECT FILES', // The text to use for the browse button
checkExisting : false, // The path to a server-side script that checks for existing files on the server
debug : false, // Turn on swfUpload debugging mode
fileObjName : 'Filedata', // The name of the file object to use in your server-side script
fileSizeLimit : 0, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
fileTypeDesc : 'All Files', // The description for file types in the browse dialog
fileTypeExts : '*.*', // Allowed extensions in the browse dialog (server-side validation should also be used)
height : 30, // The height of the browse button
method : 'post', // The method to use when sending files to the server-side upload script
multi : true, // Allow multiple file selection in the browse dialog
formData : {}, // An object with additional data to send to the server-side upload script with every file upload
preventCaching : true, // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
progressData : 'percentage', // ('percentage' or 'speed') Data to show in the queue item during a file upload
queueID : false, // The ID of the DOM object to use as a file queue (without the #)
queueSizeLimit : 999, // The maximum number of files that can be in the queue at one time
removeCompleted : true, // Remove queue items from the queue when they are done uploading
removeTimeout : 3, // The delay in seconds before removing a queue item if removeCompleted is set to true
requeueErrors : false, // Keep errored files in the queue and keep trying to upload them
successTimeout : 30, // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
uploadLimit : 0, // The maximum number of files you can upload
width : 120, // The width of the browse button
上面是默认的设置。。。
服务器端代码：
package com.yangpan.uploadify;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
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;
public class UploadifySerlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
//上传文件的保存路径
protected String configPath = "attached/";
protected String dirTemp = "attached/temp/";
protected String dirName = "file";
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
//文件保存目录路径
String savePath = this.getServletContext().getRealPath("/") + configPath;
// 临时文件目录
String tempPath = this.getServletContext().getRealPath("/") + dirTemp;
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
savePath += "/" + ymd + "/";
//创建文件夹
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
tempPath += "/" + ymd + "/";
//创建临时文件夹
File dirTempFile = new File(tempPath);
if (!dirTempFile.exists()) {
dirTempFile.mkdirs();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时，将产生临时文件并存储于临时目录中。
factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
try {
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
String name = "";
String qq = "";
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
/*
* 第一种方法
*
* 好处： 一目了然..简单啊...
* 弊端： 这种方法会导致上传的文件大小比原来的文件要大
*
* 推荐使用第二种
*/
//item.write(uploadedFile);
//--------------------------------------------------------------------
//第二种方法
OutputStream os = new FileOutputStream(uploadedFile);
InputStream is = item.getInputStream();
byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
int length = 0;
while( (length = is.read(buf)) > 0 ){
os.write(buf, 0, length);
}
//关闭流
os.flush();
os.close();
is.close();
System.out.println("上传成功！路径："+savePath+"/"+newFileName);
out.print("1");
}catch(Exception e){
e.printStackTrace();
}
}else {
String filedName = item.getFieldName();
if (filedName.equals("userName")) {
name = item.getString();
}else {
qq = item.getString();
}
System.out.println("FieldName："+filedName);
System.out.println("String："+item.getString("UTF-8"));//避免中文乱码
//System.out.println("String()："+item.getString(item.getName()));
System.out.println("===============");
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();
}
}
WEB.XML
<servlet>
<servlet-name>UploadifySerlet</servlet-name>
<servlet-class>
com.yangpan.uploadify.UploadifySerlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadifySerlet</servlet-name>
<url-pattern>/servlet/UploadifySerlet</url-pattern>
</servlet-mapping>
基本设置
swf：主要Flash文件路径，默认uploadify.swf，如果同调用文件在同一不目录下可以忽略
uploader：后台处理程序路径，默认uploadify.php
postData：传递参数，默认{}
auto：是否允许自动上传文件，默认false
method：传递参数方式，默认post
外观设置
width：按钮宽度，默认120
height：按钮高度，默认30
buttonClass：按钮样式设置，如：样式为.btnClass{color:red;}
buttonCursor：鼠标移入时指针样式，默认hand，（注：设置后不知道怎么显示）
buttonImage：按钮显示图片地址，默认false，（注：必须是高度2倍，包含两个按钮图片，上默认、下鼠标移入，IE9）
buttonText：按钮显示文字信息，默认SELECT FILES，（注：3.0.0版本支持中文）
cancelImage：取消选中文件图片，默认uploadify-cancel.png
fileTypeDesc：选择文件时文件类型提示，默认All Files (*.*)
fileTypeExts：选择文件时文件类型限制，默认*.*，（注：如果fileTypeDesc和fileTypeExts同时设置，则显示组合，如：All Files (*.*) (*.*)
多个类型如：“*.JPG;*.GIF;*.PNG;*.BMP”）
操作设置
queueID：上传队列容器ID，默认false
removeCompleted：是否删除容器内已经上传完毕文件，默认true
removeTimeout：删除容器内已经上传完毕文件延迟时间，单位s，默认3
fileSizeLimit：设置允许上传文件大小，单位k，默认0不限制
multi：是否支持多文件同时上传，默认false
queueSizeLimit：限制一次上传文件个数，即容器内最多文件个数，默认999
simUploadLimit：允许同时上传文件个数，同时执行，默认1，（注：3.0.0测试版注释此参数）
调试设置
debug：是否显示调试框，默认false
checkExisting：检查待上传文件是否存在程序，默认uploadify-check-existing.php
其他设置
fileObjName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据，默认Filedata，（作用不明）
requeueErrors：未知，默认false
preventCaching：未知，默认true
progressData：未知，默认percentage
successTimeout：未知，默认30
transparent：未知，默认true
uploadLimit：未知，默认999
uploaderType：未知，默认html5
langFile：错误提示文件，可以忽略
id：当前操作的ID编码，默认jQuery(this).attr('id')，可以忽略。
onClearQueue: function () {}：未知
onDialogOpen: function () {}：打开选择文件窗口
onDialogClose: function () {}：关闭选择文件窗口
onInit: function () {}：初始化
onQueueComplete: function () {}：全部文件上传结束
onSelectError: function () {}：选择文件：选择错误
onSelect: function () {}：单个文件：选择文件，每选中一个文件都执行一次
onSWFReady: function () {}：未知
onUploadCancel: function () {}：未知
onUploadComplete: function () {}：单个文件上传结束，注意：最后一个文件结束在全部结束后
onUploadError: function () {}：上传文件错误/取消已选择文件
onUploadProgress: function () {}：单个文件：上传过程中
demo 下载，有问题大家可以一起讨论啊。。。。。
- 大小: 24.2 KB
分享到：
相关推荐
...
使用Jquery的上传插件Uploadify，提供upload.ashx的C#源码和VB源码，方便直接使用，因为不会VB，所以只使用C#做了上传的示例。在web.config中配置上传的文件夹路径！ 示例的主要功能是创建一个新的文件夹并将文件...
jquery 批量上传插件 Uploadify 。上传的是整个项目，下载解压后直接运行 ，用的是开发工具是myeclipse8.5
JQuery uploadify 实现文件批量上传完整例子，所有js，和uploadify插件js 都放在这个例子中
jQuery Uploadify文件批量上传实例 自己对jQuery Uploadify插件稍作整理，样式不合适可以根据自己的需要修改； 可以实现多文件上传，同时显示上传进度条和百分比，上传完毕后将统计上传文件的总数量、文件总大小和...
AnotherUploadify类似JQuery的优秀插件Uploadify，目的是实现文件的批量上传。下面是AnotherUploadify的特点介绍1，同时支持ftp, http这两种数据传输协议。设置protocol="ftp"，使用ftp上传；设置protocol="http"，...
UploadiFive是一款来自国外的、优秀的jQuery插件，主要功能是上传文件，支持文件的批量上传、拖拽上传等，是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用，但是Uploadify需要Flash的...
主要介绍了jquery插件uploadify实现带进度条的文件批量上传，感兴趣的小伙伴们可以参考一下
uploadify批量上传文件完整使用教程，供大家参考，具体内容如下 1.首先准备uploadify的js文件，网上一搜一大堆 2.上传页面UpFilePage.aspx 关键代码： <html xmlns=http://www.w3.org/1999/xhtml> <head...
主要介绍了jQuery.Uploadify插件实现带进度条的批量上传功能,还具有取消上传及删除等功能,具有一定参考借鉴价值,需要的朋友可以参考下
uploadify 3.0 上传插件 自己添加了 水印 和 图片等比缩剪切 用jquery 有上传进度条
来自国外的一款优秀jQuery插件，主要功能是批量上传文件，此插件在项目中已被广泛之用，但是也发现不少问题，于是决定花点时间搞清这个插件的来龙去脉，其中很多东西是翻译自官网。
jQuery+uploadify批量上传小插件
uploadify是来自国外的一款优秀的jQuery上传插件，主要功能是批量上传文件，带进度显示。
uploadify的html5版本，来自国外的一款优秀jQuery插件，主要功能是批量上传文件和上传进度显示等功能。
UploadiFive是一款来自国外的、优秀的jQuery插件，主要功能是上传文件，支持文件的批量上传、拖拽上传等，是一个易集成的多文件上传解决方案。 UploadiFive基于HTML5和jQuery，不在需要Flash的支持，可以进行批量...
Jsp结合uploadify插件实现的批量多文件上传源码，多文件同时上传，可上传文件和图片，uploadify结合jQuery实现JSP下的无刷新图片上传、文件上传功能。*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明...