檔案上傳外掛Plupload使用(帶圖片預覽功能)
阿新 • • 發佈:2019-02-03
//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()); } }