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

所属分类:输入-上传

 39156  355  查看评论 (25)
分享到微信朋友圈
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(',');
};
相关插件-上传

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 80694  560

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 124919  962

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 87326  526

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 58952  382

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

    panking 0
    2022/12/13 17:14:09
    不能多图呀[👍+transform:rotate(180deg)] 回复
    爱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
    安卓微信缩放裁剪图片就没了,怎么解决,求大佬帮忙 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复