| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- $(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() );
- }
- }
- })
|