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. 服务器修改 ssh 22端口

    我们首先修改配置文件,让ssh 通知支持2个端口访问 ,22 和 23456 端口. Port 22 Port 23456 为什么要这样: 万一我用 23456端口替换了22端口,但是 23456正好 ...

  2. CodeForces 609C Load Balancing

    先算出目标状态,然后拿当前状态与目标状态对比,即可算出答案 #include<cstdio> #include<cmath> #include<cstring> # ...

  3. vs 2012svn 插件设置

  4. Lua学习系列（二）

    资源整理: 风云老师博客: http://blog.codingnow.com/eo/luaoeeeaeau/ 知乎: https://www.zhihu.com/question/20736660 ...

  5. SpringMVC轻松学习-环境搭建（二）

    基于spring2.5的采用XML配置的spring MVC项目 注:本项目全部基于XML配置.同时,集成了hibernate.采用的是:spring MVC+hibernate+spring的开发架 ...

  6. flume-1.6.0单节点部署

    这个不多说,直接上干货,部署很简单! 步骤一:flume的下载 当然,这里也可以使用wget命令在线下载,很简单,不多说. 步骤二:flume的上传 [hadoop@djt002 flume]$ ls ...

  7. express4.x中路由中间件和挂载路径的关系

    express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...

  8. CollectionView中deleteItems方法的使用

    最近在做一个批量删除照片的功能,调用了 deleteItems这个方法,但是使用这个方法之后程序崩溃,报错:You need to also delete associated data from t ...

  9. df换行问题的设置

    df是linux下用来查磁盘空间的命令,而在使用了LVM分区或网络挂载的情况下,再用df取分区的使用率时,发现有些分区显示换行了,这样会导致通过脚本取的数据不对. [root@ ]# df -h Fi ...

  10. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...