1. 程式人生 > >檔案上傳外掛Plupload使用(帶圖片預覽功能)

檔案上傳外掛Plupload使用(帶圖片預覽功能)

//plupload(1.2)中為我們提供了mOxie物件
//有關mOxie的介紹和說明請看:https://github.com/moxiecode/moxie/wiki/API
function previewImage(file, callback) { //file為plupload事件監聽函式引數中的file物件,callback為預覽圖片準備完成的回撥函式
    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() {
            callback(fr.result);
            fr.destroy();
            fr = null;
        }
        fr.readAsDataURL(file.getSource());
    } else {
        var preloader = new mOxie.Image();
        preloader.onload = function() {
            preloader.downsize(300, 300); //先壓縮一下要預覽的圖片,寬300,高300
            var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到圖片src,實質為一個base64編碼的資料
            callback && callback(imgsrc); //callback傳入的引數為預覽圖片的url
            preloader.destroy();
            preloader = null;
        };
        preloader.load(file.getSource());
    }
}