Jcrop+七牛JDK+plupload合体成粗糙的头像上传组件。。

来源：互联网发布：青岛恢复手机数据编辑：程序博客网时间：2024/06/05 09:11

plupload中文良心使用手册
七牛图片处理，基本能说清如何使用。
jcrop中文手册，作者翻译的很好。
非常感谢上面三篇文章给予支持。。
代码较乱，有空再整理一下。
基本思路：

初始化jcrop

                    jQuery(function ($) {                        var jcrop_api = '';                        var boundx = '';                        var boundy = '';                        avatar();                    });

                    function avatar() {                        // Grab some information about the preview pane                        $preview = $('#preview-pane');                        $pcnt = $('#preview-pane .preview-container');                        $pimg = $('.jcrop-preview');                        xsize = $pcnt.width();                        ysize = $pcnt.height();//                        console.log('init',[xsize,ysize]);                        $('#target').Jcrop({                            boxWidth: 606,                            boxHeight: 404,                            allowResize: false,                            onChange: updatePreview,                            onSelect: updatePreview,                            aspectRatio: 1,                            maxSize: [180, 180],                            minSize: [180, 180],                        }, function () {                            // Use the API to get the real image size                            $pimg.css({                                display: 'none',                                visibility: 'hidden',                            });                            var bounds = this.getBounds();                            boundx = bounds[0];                            boundy = bounds[1];                            // Store the API in the jcrop_api variable                            jcrop_api = this;                            api = this;                            // Move the preview into the jcrop container for css positioning                            $preview.appendTo(jcrop_api.ui.holder);                        });                        function updatePreview(c) {                            $cx = c.x;                            $cy = c.y;                            if (parseInt(c.w) > 0) {                                var rx = xsize / c.w;                                var ry = ysize / c.h;                                $pimg.css({//                                width: Math.round(rx * boundx) + 'px',//                                height: Math.round(ry * boundy) + 'px',//                                marginLeft: '-' + Math.round(rx * c.x) + 'px',//                                marginTop: '-' + Math.round(ry * c.y) + 'px'//                                width: '180px',//                                height: '180px',                                    marginLeft: '-' + c.x + 'px',                                    marginTop: '-' + c.y + 'px',                                });                            }                        }                    }

初始化七牛jdk

                    var uptoken = $("input[name=token]").val();                    //        var company_id=$('.company_id').attr('id');                    var uploader1 = Qiniu.uploader({                        runtimes: 'html5,flash,html4',    //上传模式,依次退化//            browse_button:  $(this).attr("id"),       //上传选择的点选按钮，**必需**                        browse_button: 'upload1',       //上传选择的点选按钮，**必需**//            uptoken_url: '/token',                        //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）                        uptoken: uptoken,                        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成                        // unique_names: true,                        // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）//             save_key: true,                        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理                        domain: 'http://img.wenhuacb.cn/',                        //bucket 域名，下载资源时用到，**必需**//            container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，                        max_file_size: '10mb',           //最大文件体积限制                        flash_swf_url: '/static/plupload/js/Moxie.swf',  //引入flash,相对路径                        max_retries: 3,                   //上传失败最大重试次数                        dragdrop: true,                   //开启可拖曳上传//            drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传                        chunk_size: '4mb',                //分块上传时，每片的体积                        auto_start: false,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传                        init: {                            'FilesAdded': function (up, files) {                                plupload.each(files, function (file) {//                                    console.log(file.getNative());//                                    console.log(uptoken);                                    $res = file.getNative();                                    // 文件添加进队列后,处理相关的事情                                    var reader = new FileReader();                                    reader.onload = function (e) {                                        api.setImage(this.result);                                        $('.jcrop-preview').attr({                                            src: this.result,                                        });                                        $('.jcrop-preview1').css({                                            display: 'none',                                            visibility: 'hidden',                                        });                                        $('.jcrop-preview').css({                                            display: '',                                            visibility: '',                                        });                                    }                                    //这种写法最容易产生混乱。。                                    reader.readAsDataURL($res);                                });                            },                            'BeforeUpload': function (up, file) {                                // 每个文件上传前,处理相关的事情                            },                            'UploadProgress': function (up, file) {                                $('.pro1').html('上传进度' + file.percent);                                // 每个文件上传时,处理相关的事情                            },                            'FileUploaded': function (up, file, info) {                                // 每个文件上传成功后,处理相关的事情//                    $('.fname').html(file.name);//                    $('.keyname1').html(JSON.parse(info).key);//                    $('.square').attr({//                        'src':'http://img.wenhuacb.cn/'+JSON.parse(info).key,//                        'photo':'http://img.wenhuacb.cn/'+JSON.parse(info).key,//                    });//                                $('#thumb_pic').attr({////                                    'photo': 'http://img.wenhuacb.cn/' + JSON.parse(info).key,//                                    'value': 'http://img.wenhuacb.cn/' + JSON.parse(info).key,//                                });//                                console.log($pimg.css('margin-left'));                                $.ajax({                                    url: '?member/member-face.html',                                    type: 'POST',                                    data: {                                        'uid': $('input[name=uid]').val(),                                        'data[img]': JSON.parse(info).key + '?imageMogr2/crop/!180x180a' + $cx + 'a' + $cy,                                    },                                    succuss: function () {                                    },                                });//                    alert($('.rectangle_logo').val());                                // 其中 info 是文件上传成功后，服务端返回的json，形式如                                // {                                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",                                //    "key": "gogopher.jpg"                                //  }                                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html                                // var domain = up.getOption('domain');                                // var res = parseJSON(info);                                // var sourceLink = domain + res.key; 获取上传成功后的文件的Url                            },                            'Error': function (up, err, errTip) {                                //上传出错时,处理相关的事情                            },                            'UploadComplete': function () {                                //队列文件处理完毕后,处理相关的事情                                $('.pro1').html('成功');                            },                            'Key': function (up, file) {                                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数                                // 该配置必须要在 unique_names: false , save_key: false 时才生效//                    var key = company_id+uptoken;                                // do something with key here//                    return key                            }                        }

使用plupload收集文件
生成DataUrl
图片上传至七牛，将返回的key和收集的截图坐标存入数据库。

0 0