之前使用过很多的上传组件，但对各种浏览器的兼容性太差，不得不放弃！！
　　plupload 是款很强大的上传组件，不得不推荐。plupload 前端根据浏览器不同选择使用Html5、 Gears, Silverlight, Flash, BrowserPlus来对文件进行客户端优化，比如大图片的压缩，大文件分块上传，上传进度条、多文件上传等。官方网站：http://plupload.com/
 
效果截图：
 

配置文档说明：

Browse_button:触发浏览文件按钮标签的唯一id,,在flash、html5、和silverlight中能找到触发事件的源（我理解的，这个参数在队列部件不需要参见）

Container: 展现上传文件列表的容器，[默认是body]

chunk_size：当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出

drop_element：当浏览器支持拖拽的情况下，能够文件拖放到你想要的容器ID里

file_data_name：设置上传字段的名称。默认情况下被设置为文件。（我试验了没找到该如何使用它，暂且不提）

filters:选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]

flash_swf_url:flash文件地址

headers：自定义的插入http请求的键值对

max_file_size：最大上传文件大小（格式100b, 10kb, 10mb, 1gb）

multipart：布尔值，如果用mutlipart 代替二进制流的方式，在webkit下无法工作

multipart_params： 跟 multipart关联在一起的键值对

multi_selection： 多选对话框

resize：修改图片属性 resize: {width: 320, height: 240, quality: 90}

runtimes:上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推

required_features：需要那些特性，才能初始化插件

url：上传服务器地址

unique_names：是否生成唯一的文件名，避免与服务器文件重名

urlstream_upload：布尔值 如果是flash上传应该用URLStream 代替FileReference.upload

jquery部件的属性：

dragdrop：是否支持拖拽，默认值true

multiple_queues：是否可以多次上传

preinit：插件初始化前回调函数

rename：布尔值，上传之前可以重命名文件，默认false，木有找到如何重命名啊

API文档：

       方法列表：

　　Uploader(setting)：创建实例的构造方法

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash',
    browse_button : 'button_id'
});

　　bind(event, function[, scope])：绑定事件

uploader.bind('Init', function(up) {
    alert('Supports drag/drop: ' + (!!up.features.dragdrop));
});

　　destroy()：销毁plupload的实例对象

uploader.destroy()

　　getFile(id): 获取上传文件信息

uploader.bind('FilesAdded', function(up, files) {
    for (var i in files) {
        up.getFile(files[i].id);      
    }
});<span style="color: #ff0000; font-size: 13px;">　</span>

注：file：{
　　id:文件编号,
　　loaded: 已经上传多少字节,
　　name: 文件名,
　　percent: 上传进度,
　　size: 文件大小,
　　status: 有四种状态 QUEUED, UPLOADING, FAILED, DONE.对应数值
}



init:初始化plupload实例，添加监听对象














uploader.destroy()














　　refresh：重新实例化uploader


　removeFile(id):从file中移除某个文件


　　splice(start,length)：从队列中start开始删除length个文件， 返回被删除的文件列表


　　start() 开始上传


stop()停止上传


　　unbind(name, function): 接触事件绑定


　　unbindAll()解绑所有事件


　属性集合：


features：uploader中包含那些特性


files:当前队列中的文件列表


id：uploader实例的唯一id


runtime：当前运行环境（是html5、flash等等)


state:当前上传进度状态


total：当前上传文件的信息集合


事件集合:（up为uploader缩写）


BeforeUpload(up, file)：文件上传完之前触发的事件


ChunkUploaded(up, file,response)文件被分块上传的事件


Destroy(up):uploader的destroy调用的方法


Error(up, err)：上传出错的时候触发


Fileadded(up, files):用户选择文件时触发


FileRemoved(up, files):当文件从上传队列中移除触发


FileUploaded(up, file, res):文件上传成功的时候触发


Init(up):当初始化的时候触发


PostInit(up):init执行完以后要执行的事件触发


QueueChanged(up):当文件队列变化时触发


Refresh(up):当silverlight/flash或是其他运行环境需要移动的时候触发


StateChanged(up)当整个上传队列被改变的时候触发


UploadComplete(up,file)当队列中所有文件被上传完时触发


UploadFile(up,file)当一个文件被上传的时候触发


UploadProgress(up,file):当文件正在被上传中触发


参见：


示例：http://plupload.com/example_queuewidget.php


API:http://plupload.com/plupload/docs/api/index.html






 


事例代码：






<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="common/plupload/moxie.js"></script>

<script type="text/javascript" src="common/plupload/plupload.dev.js"></script>

<!-- Load Queue widget CSS and jQuery -->

<style type="text/css"> @importurl(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>

<script type="text/javascript" src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"></script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->

<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->

<script type="text/javascript" src="common/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>

</head>

<body>

<div id="uploader">

    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>

</div>

<script>

    $('#uploader').pluploadQueue({

        url : 'Upload',

        filters : [ {

            title : "Image files",

            extensions : "jpg,gif,png"

        } ],

        rename : true,

        flash_swf_url : 'common/plupload/Moxie.swf',

        silverlight_xap_url : 'common/plupload/Moxie.xap',

        filters : {

            max_file_size : '100mb',

            mime_types : [ {

                title : "Image files",

                extensions : "jpg,gif,png"

            }, {

                title : "Zip files",

                extensions : "zip,apk,doc,exe"

            } ]

        }

    });

</script>

</body>

</html>








特性：




注释：1、gears：http://zh.wikipedia.org/wiki/Gears


2、Silverlight：http://zh.wikipedia.org/wiki/Silverlight


3、browserplus: http://developer.yahoo.com/browserplus/


注意：1、分块:chrome和firefox 4+ 支持。


2、拖拽适用于firefox和webkit内核的浏览器，windows版的safari还存在一些问题待解决。


3、图片缩放仅在firefox3.5+和chrome上支持，safari/opera 不支持直接数据访问选定的文件。


4、目前所有的浏览器不支持文件类型过滤。但是，我们填写HTML5的接受文件类型过滤属性，一旦有支持它会工作。


5、 多文件上传仅支持gecko和webkit内核的浏览器。




  




借鉴：http://www.boyunjian.com/v/softd/Plupload.html
												


											
关于Plupload结合上传插件jquery.plupload.queue的使用的更多相关文章
	

    
								
  1. jQuery文件上传插件jQuery Upload File 有上传进度条
		
    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
    
		
    2. 
						
  2. jquery上传插件Jquery.uploadify.js-转
		
    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
    
		
    3. 
						
  3. JQuery文件上传插件JQuery.upload.js的用法简介
		
    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
    
		
    4. 
						
  4. 【web】之 jquery上传插件的Plupload的使用
		
    首先下载plupload->http://www.plupload.com 因为Plupload可配置参数比较多,所以这里讲解最常用的,结合jquery-ui展示的界面!如下: Plupload ...
    
		
    5. 
						
  5. plupload 异步上传插件使用心得
		
    plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...
    
		
    6. 
						
  6. plupload文件上传插件
		
    一 资源文档 二 基本使用 三 可能遇到的问题 一 资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...
    
		
    7. 
						
  7. 图片裁剪上传插件——jquery.photoClip.js
		
    想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js]  ...
    
		
    8. 
						
  8. Plupload上传插件简单整理
		
    Plupload Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部 ...
    
		
    9. 
						
  9. Thinkphp5+plupload图片上传功能，支持实时预览图片。
		
    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PHP中的Libevent学习
			
    wangbin@2012,1,3 目录 Libevent在php中的应用学习 1.      Libevent介绍 2.      为什么要学习libevent 3.      Php libeven ...
    
			
    2. 
						
  2. .NET：序列化和反序列化
			
    .NET:序列化和反序列化 需要反序列化的字符串: { "LouPanID": "sample string 1", "LouPanHao" ...
    
			
    3. 
						
  3. hbase shell基础和常用命令详解(转)
			
    HBase shell的基本用法 hbase提供了一个shell的终端给用户交互.使用命令hbase shell进入命令界面.通过执行 help可以看到命令的帮助信息. 以网上的一个学生成绩表的例子来 ...
    
			
    4. 
						
  4. Java锁 到底锁的是哪个对象？
			
    更新:在一次和一位专家的交谈中,他对一下代码能否能够成功同步,给予了否定的答案, 他的理由是”以构造函数的成员变量作为synchronized的锁,在多线程的情况下,每一个线程都持有自己私有变量的锁, ...
    
			
    5. 
						
  5. poj 3083 Children of the Candy Corn
			
    点击打开链接 Children of the Candy Corn Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8288  ...
    
			
    6. 
						
  6. poj 2513 Colored Sticks trie树+欧拉图+并查集
			
    点击打开链接 Colored Sticks Time Limit: 5000MS   Memory Limit: 128000K Total Submissions: 27955   Accepted ...
    
			
    7. 
						
  7. Django model中常见Field types , Field options
			
    AutoField :自增,数据库 BooleanField:布尔型 CharField:字符型 DateField:日期,datetime.date类的实例.有两个常用的option,auto_no ...
    
			
    8. 
						
  8. Sqoop2入门之导入关系型数据库数据到HDFS上(sqoop2-1.99.4版本)
			
    sqoop2-1.99.4和sqoop2-1.99.3版本操作略有不同:新版本中使用link代替了老版本的connection,其他使用类似. sqoop2-1.99.4环境搭建参见:Sqoop2环境 ...
    
			
    9. 
						
  9. js动画性能提升笔记
			
    JavaScript动画的性能并不亚于CSS动画.因此,如果使用了现代的动画库,例如Velocity,那么动画引擎的性能将不再是app的瓶颈,构成瓶颈的只有代码. 网络性能相关 动画是浏览器运行中资源 ...
    
			
    10. 
						
  10. centos7.2上实践cgoup
			
    基本介绍 CGroups 是一种对进程资源管理和控制的统一框架,它提供的是一种机制,而具体的策略(Policy)是通过子系统(subsystem)来完成的.子系统是CGroups对进程组进行资源控制的 ...
    
			
    11.