plupload 可以不依赖jquery，并且提供了 html5,flash,silverlight,html4 多种上传模式，使用起来比较简单，上一篇博客中介绍了其主要参数哈函数

一.简化用法

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

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

<title>Plupload - Custom example</title>

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

</head>

<body style="font: 13px Verdana; background: #eee; color: #333">

<h1>Custom example</h1>

<p>Shows you how to use the core plupload API.</p>

<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>

<br />

<div id="container">

    <a id="pickfiles" href="javascript:;">[Select files]</a>

    <a id="uploadfiles" href="javascript:;">[Upload files]</a>

</div>

<br />

<pre id="console"></pre>

<script type="text/javascript">

// Custom example logic

var uploader = new plupload.Uploader({

	runtimes : 'html5,flash,silverlight,html4',

	browse_button : 'pickfiles', // you can pass an id...

	container: document.getElementById('container'), // ... or DOM Element itself

	url : 'upload.php',

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

	silverlight_xap_url : '../js/Moxie.xap',

	filters : {

		max_file_size : '10mb',

		mime_types: [

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

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

		]

	},

	init: {

		PostInit: function() {

			document.getElementById('filelist').innerHTML = '';

			document.getElementById('uploadfiles').onclick = function() {

				uploader.start();

				return false;

			};

		},

		FilesAdded: function(up, files) {

			plupload.each(files, function(file) {

				document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';

			});

		},

		UploadProgress: function(up, file) {

			document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";

		},

		Error: function(up, err) {

document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));

		}

	}

});

uploader.init();

</script>

</body>

</html>

只需要一个 plupload.full.min.js 类库就可以了，就是没有任何的样式

在yii的blog中使用的就是这种模式，可以去coding 下载 整合plupload

二.整合了jquery ui,并且引入了很多类库实现了带界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

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

  <title>多文件上传</title>

  <style type="text/css">

	@import url(Scripts/jquery.ui.plupload/css/jquery.ui.plupload.css);

  </style>

  <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>

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

  <link rel="stylesheet" href="Scripts/base/jquery-ui.css" />

  <!-- Third party script for BrowserPlus runtime (Google Gears included in Gears runtime now) -->

  <script type="text/javascript" src="Scripts/browserplus-min.js"></script>

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

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

  <script type="text/javascript" src="Scripts/i18n/zh-cn.js"></script>

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

  <script type="text/javascript">

    // Convert divs to queue widgets when the DOM is ready

    $(function () {

        $("#uploader").plupload({

            // General settings

            runtimes: 'gears,flash,silverlight,browserplus,html5', // 这里是说用什么技术引擎

            url: 'uploadFiles.ashx', // 服务端上传路径

            max_file_size: '10mb', // 文件上传最大限制。

            chunk_size: '1mb', // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可。

            unique_names: true, // 上传的文件名是否唯一

            // Resize images on clientside if we can

            //// 是否生成缩略图（仅对图片文件有效）

            resize: { width: 320, height: 240, quality: 90 },

            // Specify what files to browse for

            ////  这个数组是选择器，就是上传文件时限制的上传文件类型

            filters: [

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

				{ title: "Zip files", extensions: "zip,rar,7z" }

			],

            // Flash settings

            // plupload.flash.swf 的所在路径

            flash_swf_url: 'Scripts/plupload.flash.swf',

            // Silverlight settings

            // silverlight所在路径

            silverlight_xap_url: 'Scripts/plupload.silverlight.xap'

        });

        // Client side form validation

        /*$('form').submit(function (e) {

            var uploader = $('#uploader').plupload('getUploader');

            // Files in queue upload them first

            if (uploader.files.length > 0) {

                // When all files are uploaded submit form

                uploader.bind('StateChanged', function () {

                    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {

                        $('form')[0].submit();

                    }

                });

                uploader.start();

            } else

                alert('You must at least upload one file.');

            return false;

        });*/

    });

</script>

 </head>

 <body>

  <form id="form1" runat="server">

   <div id="uploader" style="width: 600px">

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

   </div>

  </form>

 </body>

</html>

百度云下载地址 http://pan.baidu.com/s/1qWMLsra

plupload 异步上传插件使用心得的更多相关文章

  1. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  2. 浅谈异步上传插件 jquery-file-upload插件

    当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是... ...

  3. jquery之ajaxfileupload异步上传插件

    点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...

  4. jQuery 异步上传插件 Uploadify302 使用 （JavaEE Spring MVC）

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.而且是Ajax的,省去了自己写Ajax上传功能的麻烦.不过官方提供的实例时php版本的,本文将详细介绍Uploadify ...

  5. 【文件上传】jquery之ajaxfileupload异步上传插件

    来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...

  6. plupload文件上传插件

    一 资源文档 二 基本使用 三 可能遇到的问题 一 资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...

  7. 基于struts2的ajaxfileupload异步上传插件的使用

    服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1 ...

  8. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  9. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

随机推荐

  1. C#入门经典（2-重置窗体布局，界面介绍，错误列表）

  2. 关于127.0.0.1与localhost

    127.0.0.1是不会经过防火墙的,而localhost是要通过防火墙取地址的.

  3. map转换成list

    Java代码如下: package Test01; import java.util.ArrayList; import java.util.HashMap; import java.util.Ite ...

  4. 分析UIWindow

    转载自:http://www.cnblogs.com/YouXianMing/p/3811741.html The UIWindow class defines an object known as ...

  5. FileFilter与FilenameFilter实例

    下面的例子中我们创建了一个FileFilter类,此类根据文件名的扩展名是否为.txt来筛选文件.创建FileFilter实例之后需要将此实例作为参数传给File的listFiles(fileFilt ...

  6. PAT (Advanced Level) 1076. Forwards on Weibo (30)

    最短路. 每次询问的点当做起点,然后算一下点到其余点的最短路.然后统计一下最短路小于等于L的点有几个. #include<cstdio> #include<cstring> # ...

  7. BodyContent揭秘及定制复杂的JSP标签

    BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报  分类: HT ...

  8. Arduino IDE 添加DHT11传感器第三方库的方法

    由于Arduino本身没有DHT 11温湿度传感器的的头文件,单有第三方的库可以给我门使用.方法如下: Step 1:如果你已经下载了最新版的Arduino IDE就可以使用其自带的库管理器和版型管理 ...

  9. css3的box-sizing--从此不用担心盒模型的不兼容

    前段时间阿里的面试问了关于盒模型的东西,众所周知,ie和标准盒模型是有着区别的.面试官问有没有什么办法可以改变盒模型的显示效果.答案是css3的box-sizing: 其可以取三个值: 1.值cont ...

  10. flex中Event类的使用

    当您创建自己的自定义 Event 类时,必须覆盖继承的 Event.clone() 方法,以复制自定义类的属性.如果您未设置在事件子类中添加的所有属性,则当侦听器处理重新分派的事件时,这些属性将不会有 ...