首先下载plupload->http://www.plupload.com

因为Plupload可配置参数比较多，所以这里讲解最常用的，结合jquery-ui展示的界面！如下:

Plupload默认支持html5,flash,silverlight,html4,四种上传方式,按照顺序进行加载，如果浏览器不支持html5则会选择flash...到最后html4,

如果不需要某种上传方式,在配置里面不写即可！

直接上代码

<body>

	<div id="uploader">

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

	</div>

	<script type="text/javascript">

	$(function(){

		$("#uploader").plupload({

			runtimes: 'html5,flash,silverlight,html4',//这里可以不写,plupload默认支持

			url: "UploadPhotoServlet",//上传后台请求路径

			max_file_size: '1000mb',//用来限制单个文件大小的

			multi_selection: true,//默认支持多文件上传,false不支持

			chunk_size: '0',//是否将上传文件进行分片,0代表是不分

			/*resize配置是对图片的处理

				可以使用该参数对将要上传的图片进行压缩，该参数是一个对象，里面包括5个属性：width：指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度

				height：指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度

				crop：是否裁剪图片

				quality：压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小

				preserve_headers：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

				resize参数的配置示例如下：

			*/

			/* resize : {

				width: 200,

				height: 200,

				quality: 90,

				crop: true

			}, */

			/* rename: true, *///允许多队列文件进行重命名

			/* sortable: true,*/ //启用队列中的文件排序功能，更改上传优先级

			/*dragdrop: true, */ //开启拖拽上传,默认true

			/*

				下面是展示右边的缩略图和列表 两个功能

				默认显示缩略图

			*/

			views: {

				list: true,

				thumbs: true, // Show thumbs

				active: 'thumbs'

			},

			/*

				flash 和 xap 上传需要的文件

			*/

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

			silverlight_xap_url : 'plupload/js/Moxie.xap'

		});

	})

</script>

</body>

　　

在官方文档有这样一句话

也就是说，UI.Plupload 需要jquery-ui的支持,http://jqueryui.com/download/ 选择合适的主题，我选的是这个

完整的 引入文件是

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

	<script type="text/javascript" src="plupload/js/jqueryui/jquery-ui.min.js"></script>

	<link rel="stylesheet" href="plupload/js/jqueryui/jquery-ui.min.css"/>

	<script type="text/javascript" src="plupload/js/plupload.full.min.js"></script>

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

	<script type="text/javascript" src="plupload/js/i18n/zh_CN.js"></script>

	<link rel="stylesheet" type="text/css" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css"/>

	<title>plupload</title>

</head>

　　

常见问题：

1、如果你发现点击 选择文件 按钮，弹出文件框特别慢，那么将，过滤文件代码去掉即可！根据具体情况，自己设置

filters: {

mime_types : [ //只允许上传图片和zip文件

{ title : "Image files", extensions : "jpg,gif,png" },

{ title : "Zip files", extensions : "zip" }

],

max_file_size : '400kb', //最大只能上传400kb的文件

prevent_duplicates : true //不允许选取重复文件

}

可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性：mime_types：用来限定上传文件的类型，为一个数组，该数组的每个元素又是一个对象，该对象有title和extensions两个属性，title为该过滤器的名称，extensions为文件扩展名，有多个时用逗号隔开。该属性默认为一个空数组，即不做限制。

max_file_size：用来限定上传文件的大小，如果文件体积超过了该值，则不能被选取。值可以为一个数字，单位为b,也可以是一个字符串，由数字和单位组成，如’200kb’

prevent_duplicates：是否允许选取重复的文件，为true时表示不允许，为false时表示允许，默认为false。如果两个文件的文件名和大小都相同，则会被认为是重复的文件

　

2、如果后台使用是的是文件域名称接收文件，并且附加有额外参数

需要额外设置两个参数

 file_data_name:"uploadFile",//指定文件上传时文件域的名称，默认为file,例如在php中你可以使用$_FILES['file']来获取上传的文件信息

/* resize : {

   width: 200,

   height: 200,

   quality: 90,

   crop: true // crop to exact dimensions

}, */

multipart_params:{//上传时的附加参数，以键/值对的形式传入，服务器端可是使用$_POST来获取这些参数(以php为例)

  "prefixName":"magazine"

},

　　

3、在和easyui,extjs等UI库进行整合时候，引入Plupload的文件一定要在easyui的引入文件之前，否则easyui会出现一些莫名奇妙的错误！

ok,到这里基本完成Plupload的使用，plupload中文参考文档 http://www.phpin.net/tools/plupload/，

这个文档仅仅介绍了Plupload基本的options,一些UI高级用法需要参考,http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method

　　

【web】之 jquery上传插件的Plupload的使用的更多相关文章

  1. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  2. jQuery上传插件,文件上传测试用例

    jQuery上传插件,文件上传测试用例 jQuery File Upload-jQuery上传插件介绍http://www.jq22.com/jquery-info230 jQuery File Up ...

  3. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  4. jquery上传插件uploadify 报错http error 302 解决方法之一

    前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...

  5. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  6. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  7. Web Uploader文件上传插件

    http://www.jq22.com/jquery-info2665   插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现 ...

  8. jquery上传插件Jquery.uploadify.js-转

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...

  9. JQuery上传插件Uploadify使用详解 asp.net版

    先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...

随机推荐

  1. AIO75产品特征与优势

    第一章 系统一体化 AIO7的核心流程由供应链.生产制造.财务成本及自动化办公构成,是迄今为止国内最完善的ERP.OA .HR .MES一体化产品.通过CRM(客户关系)及DRP(分销)扩充出“营销通 ...

  2. C#中函数的功能和类型

    函数  就是方法是独立完成某项功能的一个个体 函数的的三个好处:1.提高代码的重用性.2.提高功能开发的效率,3.提高代码的可维护性(主要功能). 函数也分为     固定功能函数(这类函数具有可封闭 ...

  3. 关于hive ，eclipse老是提示加载不到驱动

    忙活了好长时间,很纳闷为什么加载不上驱动,驱动包.hive的依赖包.hadoop的依赖包也引入了,各种百度最后: hadoop-2.2.0/share/hadoop/common/hadoop-com ...

  4. wemall开源商城免费商城系统部分代码（内含代码地址）

    wemall开源商城免费商城系统部分代码,下面分享部分代码,供学习者学习: 开源版把install文件夹下的install.lock删除之后可进行自动安装 后台访问地址:http:// www.xxx ...

  5. 算法模板——LCA（最近公共祖先）

    实现的功能如下——在一个N个点的无环图中,共有N-1条边,M个访问中每次询问两个点的距离 原理——既然N个点,N-1条边,则说明这是一棵树,而且联通.所以以1为根节点DFS建树,然后通过求两点的LCA ...

  6. 关于label和span设置width无效问题解决方法

    转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...

  7. wireshark过滤规则

    WireShark过滤语法 1.过 滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.ad ...

  8. Where T：Class，new（）的使用

    当我们使用泛型的时候,有时候就会提示我们T必须是引用类型而无法进行下去,其实我们学泛型的时候也应该了解到这个T的使用场合,他可以是值类型也可以是引用类型,但是我们某些场合就只能使用引用类型比如EF中的 ...

  9. [认证授权] 2.OAuth2（续） & JSON Web Token

    0. RFC6749还有哪些可以完善的? 0.1. 撤销Token 在上篇[认证授权] 1.OAuth2授权中介绍到了OAuth2可以帮我们解决第三方Client访问受保护资源的问题,但是只提供了如何 ...

  10. [原]C#与非托管——动机

    Unity3D采用C#作为脚本开发语言,本来是可以直接提供代码局部更新机制的,可惜Mono和Unity3D迫于苹果的压力,在iOS上采用AOT模式运行,断绝了代码局部更新的路(任何一个具有很高知名度的 ...