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. 饥饿的牛(hunger)

    饥饿的牛(hunger) 题目描述 牛在饲料槽前排好了队.饲料槽依次用1到n(1≤n≤2000)编号.每天晚上,一头幸运的牛根据约翰的规则,吃其中一些槽里的饲料.约翰提供B个区间的清单.一个区间是一对 ...

  2. Fragment管理

    Fragments 设计理念 在设计应用时特别是Android 应用 ,有众多的分辨率要去适应,而fragments 可以让你在屏幕不同的屏幕上动态管理UI.例如:通讯应用程序(QQ),用户列表可以在 ...

  3. PAT (Advanced Level) 1093. Count PAT's (25)

    预处理每个位置之前有多少个P,每个位置之后有多少个T. 对于每个A,贡献的答案是这个A之前的P个数*这个A之后T个数. #include<cstdio> #include<cstri ...

  4. 跨域访问解决方案：JSONP

    关于什么是跨域请求,可以参见我之前的博文:http://www.cnblogs.com/LiuChunfu/p/5240145.html 上述博文最后有提到解决方案,一直说补充,但是工作忙忘了,直到朋 ...

  5. win7 以管理员身份运行cmd, windows services 的创建和删除

    以 http 协议访问svn repository 搭建可用http访问的svn(windows) http://blog.csdn.net/yangyangrenren/article/detail ...

  6. 关于配置Tomcat的URIEncoding

    遇到的问题: 程序需要发送http GET请求到服务器,请求的参数中包含了中文字符.程序中参数为UTF-8格式,且经过了UTF-8 URL编码再发送.使用的tomcat服务器,但服务器端后台程序中取到 ...

  7. Cocos2dx 3.1.1 学习笔记整理(3)：逐帧动画

    以下代码是在cocos中使用,plist+png 还有SpriteBatchNode播放动画的代码,备份一下,以防git被墙: bool GameMain::init() { if( !Layer:: ...

  8. [Lua]Mac系统上安装Lua环境

    1.下载 Lua语言的官方网站 http://www.lua.org/ 下载最新版本的Lua环境 2.安装 解压下载包lua-5.3.1.tar.gz 打开终端Terminal 使用cd命令进入该目录 ...

  9. [iOS Animation]-CALayer 图层几何学

    图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...

  10. Instruments使用实战

    http://www.cocoachina.com/ios/20150225/11163.html 最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析 ...