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 异步上传插件使用心得的更多相关文章

关于Plupload结合上传插件jquery.plupload.queue的使用
之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...
浅谈异步上传插件 jquery-file-upload插件
当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是... ...
jquery之ajaxfileupload异步上传插件
点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...
jQuery 异步上传插件 Uploadify302 使用（JavaEE Spring MVC）
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.而且是Ajax的,省去了自己写Ajax上传功能的麻烦.不过官方提供的实例时php版本的,本文将详细介绍Uploadify ...
【文件上传】jquery之ajaxfileupload异步上传插件
来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...
plupload文件上传插件
一资源文档二基本使用三可能遇到的问题一资源文档 Git仓库地址:https://github.com/moxiecode/plupload 一个中文速查:http://www.cnblo ...
基于struts2的ajaxfileupload异步上传插件的使用
服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包及struts2-json-plugin-2.1.8.1 ...
jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
适用于各浏览器支持图片预览，无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

随机推荐

android 线程池
http://blog.csdn.net/wangwenhui11/article/details/6760474 http://blog.csdn.net/cutesource/article/de ...
iOS 一招搞定去掉字符串开始的0，尤其是针对时间格式化
// 2.利用整型自动去掉开头的0, 不要循环和判断prefix以及截取字符串- (NSString *)pp_formatDateWithArrYMDToMD;{ NSInteger mont ...
Swift中异常处理(续集.正则)
正则表达式 1.创建正则表达式的规则 let pattern = "abc" 2.创建正则表达式对象 // 方式一:try方式 do { let regex = try NSReg ...
Eclipse使用的小细节归档
1. 控制台打印出来的语句不限制条数:Preference-> Run/Debug -> Control -> Limit Console Output 2.
php script 的生命周期
原文地址:https://support.cloud.engineyard.com/hc/en-us/articles/205411888-PHP-Performance-I-Everything-Y ...
Counting Intersections
Counting Intersections Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
ural1494 Monobilliards
Monobilliards Time limit: 1.0 secondMemory limit: 64 MB A monobilliards table set up in a gaming hou ...
APPIUM安装与搭建Q&A
APPIUM安装与搭建Q&A Q1:在线安装TESTNG插件时,出现安装失败,提示:Cannot complete the install because one or more requir ...
JQuery收集
Java6.0中Comparable接口与Comparator接口详解
Java6.0中Comparable接口与Comparator接口详解说到现在,读者应该对Comparable接口有了大概的了解,但是为什么又要有一个Comparator接口呢?难道Java的开发者 ...

plupload 异步上传插件使用心得

一.简化用法

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

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

随机推荐

热门专题