57 lines
2.6 KiB
JavaScript
57 lines
2.6 KiB
JavaScript
$(function(){
|
||
var uploader = new plupload.Uploader({
|
||
browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
|
||
url : '/admin/app/upload', //服务器端的上传页面地址
|
||
flash_swf_url : '/plugins/plupload/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
|
||
silverlight_xap_url : '/plugins/plupload/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
|
||
drop_element : 'drop',
|
||
multi_selection:false,
|
||
headers: {
|
||
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
|
||
},
|
||
filters: {
|
||
mime_types : [ //只允许上传图片和zip文件
|
||
{ title : "Image files", extensions : "jpg,gif,png" }
|
||
],
|
||
max_file_size : '400kb', //最大只能上传400kb的文件
|
||
prevent_duplicates : true //不允许选取重复文件
|
||
}
|
||
});
|
||
|
||
uploader.bind('FilesAdded',function(uploader,files){
|
||
var file_name = files[0].name; //文件名
|
||
//构造html来更新UI
|
||
previewImage(files[0],function(imgsrc){
|
||
$(".preview").attr('src',imgsrc);
|
||
});
|
||
uploader.start();
|
||
});
|
||
|
||
uploader.bind('FileUploaded',function(uploader,file,responseObject){
|
||
$("input[name='image']").val(responseObject['response']);
|
||
});
|
||
uploader.init();
|
||
|
||
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() );
|
||
}
|
||
}
|
||
}) |