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**是一款非常实用的前端文件上传工具，它允许用户通过Flash技术实现批量、异步的文件上传。Uploadify提供了一系列可配置的参数，使其能够适应各种上传需求，同时具备良好的用户体验。 ...
使用Jquery的上传插件Uploadify，提供upload.ashx的C#源码和VB源码，方便直接使用，因为不会VB，所以只使用C#做了上传的示例。在web.config中配置上传的文件夹路径！ 示例的主要功能是创建一个新的文件夹并将文件...
《jQuery文件上传插件jQuery.uploadify.js：跨越浏览器限制的智能解决方案》 在Web开发中，文件上传功能是一项常见的需求，而jQuery.uploadify.js是一款高效且用户友好的文件上传插件，尤其对于需要兼容多种浏览器...
**jQuery上传插件Uploadify详解** Uploadify是一款基于...总之，jQuery上传插件Uploadify是提高Web应用中文件上传体验的利器，通过其丰富的参数设置和事件处理，开发者可以定制出满足各种需求的文件上传解决方案。
JQuery Uploadify插件是一个基于JQuery的文件上传组件，它提供了一种用户友好的界面，支持多文件选择、上传进度显示以及批量上传等功能。在ASP.NET环境中使用Uploadify，你需要按照以下步骤进行配置和编码。 首先，...
本实例将探讨如何利用jQuery上传插件Uploadify与PHP技术来构建一个强大的文件上传系统。Uploadify是一款广泛使用的前端插件，它使得文件上传过程更加直观、用户友好，并且支持批量上传和自定义样式，极大地提升了...
在网页开发中，jQuery Uploadify是一个非常流行的插件，它允许用户实现批量文件上传功能，大大提升了用户体验。本文将深入探讨如何使用jQuery Uploadify来实现这一功能，以及它的工作原理和核心配置。 jQuery ...
而Uploadify则是JQuery的一个插件，它提供了一种优雅的方式来实现文件的上传功能，包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能，并探讨其核心原理和相关配置。 首先...
在Web开发中，文件上传是一项常见的功能，而jQuery Uploadify插件因其简洁的API和强大的功能，成为众多开发者首选的批量上传解决方案。尤其是其支持中文版本，更是方便了中文用户进行操作。本文将深入解析jQuery ...
jQuery Uploadify 是一款基于jQuery的文件上传插件，它提供了用户友好的界面，支持多文件选择、上传进度显示以及批量上传等功能。这个插件适用于那些希望在网页中实现复杂文件上传功能的开发者。Uploadify 通过Flash...
- **初始化Uploadify**：使用jQuery选择器找到目标元素，并调用`uploadify()`方法进行初始化，传入配置参数，如上传URL、文件类型限制、队列大小等。 - **事件监听**：可以通过设置事件处理器来监听文件选择、上传...
uploadIfy是基于JQuery的一个文件上传插件，它支持单个和批量文件上传，具有进度条显示、预览、错误处理等功能。在我们的案例中，uploadIfy提供了用户友好的界面，使得用户可以方便地选择多个文件进行上传，并实时...
批量上传_uploadify_java”提供了一个基于jQuery插件Uploadify和Java后端实现批量上传的示例，非常适合开发者学习和参考。 首先，Uploadify是一款流行的jQuery插件，它允许用户通过拖放或选择文件按钮进行文件上传...
Uploadify是基于jQuery的插件，它利用Flash的FileReference对象实现了文件选择和上传的异步操作，同时支持批量上传，大大提升了用户体验。 **2. Uploadify的安装与配置** 首先，你需要在项目中引入jQuery库和...
在这个场景下，`jQuery Uploadify`插件是一个非常实用的工具，它为ASP.NET开发者提供了一个简单易用的前端文件上传解决方案。本文将详细探讨如何在ASP.NET环境中结合jQuery Uploadify实现文件和图片的批量上传。 ...
在本文中，我们将深入探讨如何在Asp.net环境中利用Jquery.Uploadify插件实现文件的批量上传功能。Asp.net是一种强大的Web应用程序框架，而Jquery.Uploadify是jQuery库的一个扩展，专门用于处理文件上传，它允许用户...
jQuery Uploadify插件为开发者提供了一个强大的解决方案，它允许用户批量上传文件，并且在上传过程中显示进度条，极大地提升了用户体验。本文将深入探讨jQuery Uploadify的工作原理、主要功能以及如何在项目中应用。...