跨平台的文件上传插件：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取得上传的文件就行了

本文转载自泷涯零点