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. 转: window中使用PSFTP/WinSCP实现SFTP上传下载

    sftp 服务器:  dbmonitor 1.sftp属于交互式的,所以你得缓存下命令#!/bin/shsftp -o Port=3322 root@172.16.1.21:/opt << ...

  2. Spring+Struts集成(第二种方案)

    在上一篇文章中我们了解到了第一种Spring跟Struts集成的方案,但此集成方案的不足是WEB层中知道Spring的相关内容,因为需要去主动的查找对象:BeanFactory.方案二便是通过依赖注入 ...

  3. CALayer 进阶

    转载自:http://www.cofcool.net/development/2015/06/19/ios-study-note-eight-CALayer-info/ The CALayer cla ...

  4. 集合-字典（Lookup/SortedDictionary）

    Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...

  5. ural1650 Billionaires

    Billionaires Time limit: 3.0 secondMemory limit: 64 MB You probably are aware that Moscow holds the ...

  6. 【poj解题】3664

    简单,两次排序 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX 500 ...

  7. 电子工程师名片——FAT16文件系统(转)

    源:电子工程师名片——FAT16文件系统 从8月8号开始,连续一个月利用每天下班时间和周末的时间终于初步完成了一个电子工程师的电路板名片,就像U盘一样,不过这个FLASH只有64KB的大小,用的单片机 ...

  8. (简单) POJ 2750 Potted Flower，环+线段树。

    Description The little cat takes over the management of a new park. There is a large circular statue ...

  9. LPC1768基本输入输出GPIO使用

    LPC1788通用IO口的控制包含了一些基本的组件,比如设置推挽输出,开漏输出,上拉电阻等,我们今天来看看. 首先使用GPIO要打开GPIO的系统时钟   LPC_SC->PCONP |= (1 ...

  10. UIButton常用属性小结（编辑中。。。）

    Button的功能很黄很暴力,即能显示文字,又能显示图片,还能随时调整内部图片和文字的位置,用的地方很多. (1)按钮常用的四种状态: normal(普通状态) 默认情况(Default) 对应的枚举 ...