使用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();