使用plupload上传（预览图片）

1. plupload常用配置

var uploader = new plupload.Uploader({
    /*runtimes: "flash",*/      // 不需要配置
    container: document.body,   // 使用flash必须采用body，否则定位出错
    browse_button: ["fileBtn"], // 选择文件按钮id
    url: "/file/upload.php",
    flash_swf_url: './moxie.swf',
    multipart: true,
    multipart_params: {},
    file_data_name: 'files',
    filters:{
        prevent_duplicates: true,
        mime_types : [
            {
                title: 'Image files',
                extensions: 'jpg,jpeg,png,JPG,JPEG,PNG'
            }
        ],
        max_file_size: '10mb'
    }
});

2. uploader添加文件之后生成预览

var MAX_FILE_NUM = 20;  // 上传最大文件个数
// 添加文件
uploader.bind('FilesAdded',function(uploader,addFiles){
    var oldLen = uploader.files.length - addFiles.length;

    // 根据最大文件数量截取
    uploader.files.splice(MAX_FILE_NUM, uploader.files.length);
    addFiles = addFiles.slice(0, MAX_FILE_NUM - oldLen);

    // 对addFiles分别生成base64编码，用于预览
    $.each(addFiles || [], function(i, file) {

        if (!file || !/image//.test(file.type)) return; //确保文件是图片
        if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
            var fr = new mOxie.FileReader();
            fr.onload = function () {
                file.imgsrc = fr.result;
                fr.destroy();
                fr = null;
            }
            fr.readAsDataURL(file.getSource());
        } else {
            var preloader = new mOxie.Image();
            preloader.onload = function () {
                preloader.downsize(180, 120);//先压缩一下要预览的图片
                var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                file.imgsrc = imgsrc;
                preloader.destroy();
                preloader = null;
            };
            preloader.load(file.getSource());
        }

    });
});

3. uploader上传完成的回调

var upFlag = true;
// 单个文件上传完成
uploader.bind('FileUploaded', function(uploader,file, res){
    try {
        var json = $.parseJSON(res.response);   // 后端返回的标志
        if(!json || !json.ret) {
            upFlag = false;
            console.log("上传失败！"+ (json.msg || ""));
        }
    } catch(e) {
        upFlag = false;
    }

});
// 所有文件上传完成
uploader.bind('UploadComplete', function(uploader,files){
    if(upFlag) { // 上传成功
        window.location.reload(true);
    } else {
        // 重新设置可上传
        $.each(files || [], function(i, file) {
            file.status = plupload.QUEUED;
        });
    }
});

4. 注意使用flash的时候需要使用fresh方法来更新flash的位置

uploader.bind('Refresh', function(uploader,err){
    $('.moxie-shim').css('z-index', '14');
});

5. 开始上传

upFlag = true;

uploader.setOption("multipart_params", {
    param1: "1",
    param2: "2"
});
uploader.start();