|
|
当前位置: 站长天下 / 选择框上传 / jQuery移动端多图上传(带裁剪功能)特效插件
jQuery移动端多图上传(带裁剪功能)特效插件
标签:

插件介绍

    一款jQuery移动端多图上传,适应于手机端上传图片的功能,附带上传图片裁剪功能。

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-22
    阅读:

jQuery移动端多图上传(带裁剪功能)特效插件

简要教程

一款jQuery移动端多图上传,适应于手机端上传图片的功能,附带上传图片裁剪功能。

JS代码

// 显示裁剪框
PictureEdit.prototype.showCropBox = function() {
    this.cropBox.show();
    this.btnGroup.show();
    this.cropGroup.show();
};
// 隐藏裁剪框
PictureEdit.prototype.hideCropBox = function() {
    this.cropBox.hide();
    this.btnGroup.hide();
    this.cropGroup.hide();
    this.preImg.cropper('destroy');
};
// 处理上传图片(选择裁剪比例)
PictureEdit.prototype.changeCropScale = function() {
    var that = this;
    that.cropGroup.on('change', 'input', function() {
        var scale = this.value.split('/');
        that.preImg.cropper('destroy');
        that.preImg.cropper($.extend(that.cropOption, {
            aspectRatio: scale[0] / scale[1]
        }));
    });
  
};
// 处理上传图片(裁剪,缩放)
PictureEdit.prototype.crop = function() {
    var that = this;
    // 取消裁剪
    that.cancel();
  
    // 确认裁剪
    that.cropBtn.click(function() {
        that.addPics();
        that.hideCropBox();
    });
};
// 取消上传图片
PictureEdit.prototype.cancel = function() {
    var that = this;
    that.cancelCropBtn.click(function() {
        that.hideCropBox();
    });
};
// 生成上传图片的key
PictureEdit.prototype.getFileKey = function() {
    var str = '0123456789abcdefghijklmnopqrstuvwxyz',
        n = str.length,
        key = "",
        i = 1;
    while (i < n) {
        var a = Math.floor(n * Math.random());
        key += str.charAt(a);
        i++;
    }
    return key
};
// 添加上传的图片
PictureEdit.prototype.addPics = function() {
    var thumb = $('<div ><i>x</i></div>'),
        key = this.getFileKey(),
        data = '';
    this.cropImg = this.preImg.cropper('getCroppedCanvas', {
        width: 200,
        height: 200
    });
    data = this.cropImg.toDataURL();
    thumb.css('backgroundImage', 'url(' + data + ')').attr('key', key);
    thumb.Before(this.uploadBtnWrap);
    this.pics[key] = data.split(',').pop();
};
// 删除上传的图片
PictureEdit.prototype.delPics = function() {
    var that = this;
  
    that.imageWrap.on('click', 'i', function() {
        var parent = $(this).parent('.item'),
            key = parent.attr('key');
        parent.remove();
        that.pics[key];
    });
  
};
// 获取全部base64数据
PictureEdit.prototype.getPicsData = function() {
    var arr = [];
    $.each(this.pics, function(i, n) {
        arr.push(n);
    });
    return arr.join(',');
};


下一篇:没有了

网友评论

网友评论