plupload預覽上傳效果
plupload預覽上傳效果
<script src="/themes/bqg/js/lib/plupload.full.min.js"></script>
<script>
var uploader = new plupload.Uploader({ //執行個體化一個plupload上傳對象
browse_button : 'browse',
url : 'upload.html',
flash_swf_url : 'js/Moxie.swf',
silverlight_xap_url : 'js/Moxie.xap',
filters: {
mime_types : [ //隻允許上傳圖檔檔案
{ title : "圖檔檔案", extensions : "jpg,gif,png" }
]
}
});
uploader.init(); //初始化
//綁定檔案添加進隊列事件
uploader.bind('FilesAdded',function(uploader,files){
for(var i = 0, len = files.length; i
';
$(html).prependTo('#file-list');
!function(i){
previewImage(files[i],function(imgsrc){
$('#file-'+files[i].id).append('
plupload預覽上傳效果
');
})
}(i);
}
});
//plupload中為我們提供了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() );
}
}
$(function (){
$(document).on("click", "#file-list li i", function (){
$(this).parent().remove();
});
})
</script>