打算开发一个可以上传图片的东西。不过一个表单一个POST，感觉很弱智，B格太低，于是打算去弄个Flash的来。找了一番，还真有个让我大吃一惊的东西：plupload
这货的优点：
支持多平台（Flash、HTML5、HTML4、Silverlight） 界面友好 大部分界面都可以通过CSS自定义。即使是纯Flash，也只是按钮不能自定义样式罢了
直接看演示
首先到官方网站下载
1.Plupload官方网站 2.GitHub
解压后。就可以在example下查看示例
更换语言
打开js/i18n，你就可以看到很多JS文件。实际使用的时候，你可以复制你需要的文件。比如简体中文是zh-CN.js
然后在引入JS的最后加入这样一段代码（请根据实际情况更改）：
<script type="text/javascript" src="zh_CN.js"></script>刷新页面，你就会发现他已经变成了中文
基本使用
plupload有两种方法。一种“不显山不显水”的方法。一切UI你自己定义。一种是自带UI的方法。这种方法更简单友好
方法一
首先，在网页里面准备一个按钮
<a id="pickfiles" href="#">选择文件</a>
<a id="uploadfiles" href="#">上传文件</a>然后，插入一段JS：
var uploader = new plupload.Uploader({
runtimes : 'silverlight,html4', //这里的意思是，有HTML4或者Silverlight的方式
browse_button : 'pickfiles', //按钮的ID
url : 'upload.php', //提交的目标
……
init : {
PostInit: function() {
document.getElementById('uploadfiles').onclick=function(){ //绑定上传事件
uploader.start();
return false;
};
},
……
}
});
uploader.init();我没有研究这个方法。所以也不多说。各位可以直接看官方文档
方法二
首先，在网页里面准备一个表单（为什么是表单？后面解释）
<form method="post" action="dump.php">
<div id="uploader">
<p>你的浏览器不支持Flash、Silverlight、HTML5</p>
</div>
<input id="ok" type="submit" value="完成" disabled/>
</form>然后，插入一段JS：
$(function() {
var uploader=$("#uploader").plupload({
// General settings
runtimes : 'html5,flash,silverlight,html4',
url : 'upload.php',
……
filters : { //过滤器
max_file_size : '2mb', //最大文件大小
//允许的文件类型
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,jpeg"}
]
},
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
flash_swf_url : 'Moxie.swf', //Flash，请根据实际地址修改。下同
silverlight_xap_url : 'Moxie.xap',
complete:function(e,ui){
alert('上传完成');
$('#ok').removeAttr('disabled');
},
selected:function(e,ui){
$('#ok').attr('disabled','true');
}
……
});
});高级应用：自定义过滤器
plupload还有个很实用的功能，可以自定义过滤器。例如我们限制一下，图片不能高于100
灵活起见，我们首先在filters里加一句
filters : {
max_file_size : '2mb', //最大文件大小
//允许的文件类型
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,jpeg"}
],
min_img_width: 100
},然后，在方法一的var uploader = new plupload.Uploader({、方法二的var uploader=$("#uploader").plupload({之前，加入一段代码：
plupload.addFileFilter('min_img_height', function(maxRes, file, cb) {
var self = this, img = new o.Image();
function finalize(result,height) {
//清理
img.destroy();
img = null;
// if rule has been violated in one way or another, trigger an error
if (!result) {
self.trigger('Error', {
code : plupload.IMAGE_DIMENSIONS_ERROR,
message : "图片高度最小为"+maxRes+",你的图片只有"+height,
file : file
});
}
cb(result);
}
img.onload = function() {
finalize(img.height > maxRes, img.height);
};
img.onerror = function() {
finalize(false);
};
img.load(file.getSource());
});还有更多的自定义过滤器，自己看官方文档吧
服务器端的设置
这里我以php为例。我们将文件上传到SAE的Storage
<?php
//不缓存
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
@set_time_limit();
//SAE相关
define('DOMAIN','test');
define('DIR','image/');
//获取、生成文件名
if (empty($_FILES) || count($_FILES)<=0) exit('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to open input stream."}, "id" : "id"}');
$fileinfo=pathinfo($_FILES['file']['name']);
$fileExt=$fileinfo['extension'];
if (!in_array($fileExt,array('jpg','jpeg','png','gif'),TRUE)) exit('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Refused to upload file."}, "id" : "id"}');
$fileName=DIR.md5_file($_FILES['file']['tmp_name']).'.'.$fileExt;
//上传到SAE的Storage
$storage=new SaeStorage();
$result=$storage->upload(DOMAIN,$fileName,$_FILES['file']['tmp_name']);
//处理错误
if (!$result) {
sae_debug('Fail to Upload to Storage');
echo '{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}';
exit;
}
echo '{"jsonrpc" : "2.0", "result" : null, "id" : "id"}';
?>当然。文件名什么的你都可以随便取，只要知道用$_FILES取得上传的文件就行了
小结
开学了忙东忙西的，现在趁着旅博会放假来更新一下博客，也算是很勤劳的了吧？