天天看點

檔案上傳插件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());
    }
}
           
js