jQuery移动端多图上传(带裁剪功能)

所属分类:输入-上传

 30785  289  查看评论 (24)
分享到微信朋友圈
X
jQuery移动端多图上传(带裁剪功能) ie兼容11
// 显示裁剪框
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(',');
};
相关插件-上传

zyupload图片上传修改版V2.0

在原zyupload基础上增加了放大,删除,目录选择功能 。同时修改了原作者中的删除图片后该图片不能再次上传的BUG
  上传
 42648  306

兼容所有浏览器的多图上传预览(原创)

兼容所有浏览器的多图上传预览兼容IE 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 67126  512

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 85053  420

上传图片-可裁剪

上传图片可裁剪
  上传
 105518  325

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    爱JB谁谁*MIUI面子 0
    2020/7/28 16:36:43
    移动端一缩放图片就没了 有修复么? 回复
    太阳 0
    2019/9/26 9:17:29
    手机端不能用,不能缩放图片,浪费jq币 回复
    简*爱 0
    2019/8/14 11:43:29
    安卓,微信,手机浏览器 缩放裁剪图片就没了,怎么解决呢? 回复
    ?丑八怪? 0
    2019/8/5 17:31:30
    不能上传两张相同的图片怎么解决? 回复
    有人@我 0
    2019/6/27 15:59:38
    怎么控制图片大小? 回复
    6℃ 0
    2019/6/24 15:58:00
    LJM728 1
    2019/5/19 13:46:03

    Base64串传到服务器+号被替换,将base64编码后的数据再进行urlencode编码,然后再进行传递就可以了

    var imageABase64 = ‘data:image/jpeg;base64,/9j/4AAQSkZJRgA………………+………+ADFRGG…’;
    imageABase64 = encodeURIComponent(imageABase64);
    /#后台如果不是UTF-8好像还需要request.setCharacterEncoding(“UTF-8”);

    血的教训,如果不先编码在传输,会造成生成的图片为空白或者颜色混乱

    回复
    p000001 0
    2019/5/9 18:01:37
    这个很不错,但是有问题 回复
    Au revoir 0
    2019/4/16 16:07:25
    安卓微信缩放裁剪图片就没了,怎么解决,求大佬帮忙 回复
    ′雨後的那一簇彩虹 0
    2018/11/29 18:09:47
    ios上传两张相同的图片,不会出现裁剪框? 怎么解决?
        ?丑八怪?0
        2019/8/5 17:30:49
        怎么样啊 解决了吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复