jquery uploadify插件多文件上传



 

 

 

 

 效果图:

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定义的目录中

    <a  href="javascript:$('#uploadify').uploadifySettings('folder','JS');

    $('#uploadify').uploadifyUpload()"> 上传</a>

   uploadifyCancel:该函数接受一个queueID作为参数,可以取消文件队列中 指定queueID的文件。

  $('#uploadify').uploadifyCancel(id);

 

 

4、使用:

前台

<%@ 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

/**
 * 文件上传实例
 * @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:选择文件到文件队列中后的每一个文件上的关闭按钮图标,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值