多图上传裁剪

标签：

function uploadImg(btn,imgCont,btnTag,hiddenBox,popBox,cutBtn){
    var input = document.getElementById(btn);
    var img_area = document.getElementById(imgCont);
    if (typeof (FileReader) === ‘undefined‘) {
        dialogBox(‘您的浏览器不支持FileReader属性，请换一个主流浏览器‘);
        input.setAttribute(‘disabled‘, ‘disabled‘);
    } else {
        $(input).on(‘change‘,btnTag,function(){
                var file = this.files[0];
                readFile(file);
        })
    }
    var image = new Image();
    function setImageURL(url){
        image.src = url;
    }
    function readFile(file) {
        if (!/image\/\w+/.test(file.type)) {
            dialogBox("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var carousel = this.result;
            var _html ="<img class=‘imgOne‘ src=‘"+carousel+"‘>";
                    $(popBox).fadeIn();
                    $(popBox).find(‘.img-box‘).html(_html);
                    var option = {};
                         $(‘.imgOne‘).cropper({
                            aspectRatio: 16 / 9,
                            crop: function(e) {
                                option.x = e.x;
                                option.y = e.y;
                                option.width = e.width;
                                option.height = e.height;
                            }
                        });
                    $(cutBtn).on(‘click‘,function(){
                        setImageURL( carousel );
                        var width = option.width;
                        var height = option.height;
                        var canvas=$(‘<canvas width="‘+width+‘" height="‘+height+‘"></canvas>‘)[0],
                            ctx=canvas.getContext(‘2d‘);
                        ctx.drawImage(image,option.x,option.y,width,height,0,0,width,height);
                        var baseUrl = canvas.toDataURL();
                        $.ajax({
                            url:‘/Mid/Loan/multiUpload‘,
                            dataType:‘JSON‘,
                            type:‘POST‘,
                            data:{‘folder‘:‘loan_img‘,‘cutImg‘:baseUrl},
                            success:function( res ){
                                if( res.code == 1 ){
                                    //"/Uploads"+res.data
                                    $(img_area).find(‘img‘).attr(‘src‘,baseUrl);
                                    $(hiddenBox).val( res.data );
                                }else{
                                    dialogBox( res.msg );
                                }
                            }
                        })
                        $(popBox).fadeOut();
                    })
        }
    }
}

多图上传裁剪

标签：

原文地址：http://www.cnblogs.com/yuxingliang/p/5757731.html