plupload 异步上传插件使用心得
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
