移动端(h5)上传,压缩,预览图片

本文介绍了一种在移动端实现图片上传和预览的方法,包括使用FileReader API进行图片格式和大小验证,利用Canvas进行图片压缩及转换为Base64编码,并通过Ajax向后台发送图片数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目里边这次用到了移动端上传图片,拿出来分享下。

1.首先是思路,在input 发生change的时候判断浏览器时候支持图片预览,支持的情况下校验图片的格式,图片的大小,之后将拿到的图片进行canvas压缩,图片转base64,然后上传。

2.代码

            $(".file").on("change", function() {
                var that = $(this);

                //判断是否支持FileReader
                if(window.FileReader) {
                    var reader = new FileReader();
                } else {
                    $(".u-pop").showTip("您的设备不支持图片预览功能,如需该功能请升级您的设备!", "", "确定");
                }


                    //获取文件
                    var file = $(this)[0].files[0];
                    var imageType = /^image\//;
                    //是否是图片
                    if(!imageType.test(file.type)) {
                        $(".u-pop").showTip("请选择正确图片!", "", "确定");
                        return;
                    }
                    if(file.size / 1024 / 1024 > 5) {
                        $(".u-pop").showTip("图片不能大于5M!", "", "确定");
                        return;
                    }
                    if(imglength == 4) {
                        that.parent().hide();
                    }

                    //读取完成
                    reader.onload = function(e) {
                        var image = new Image();
                        image.src = e.target.result;
                        //alert(e.target.result.length)
                        var base64 = null;
                        image.onload = function() {
                            var expectWidth = this.naturalWidth;
                            var expectHeight = this.naturalHeight;
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");
                            canvas.width = expectWidth;
                            canvas.height = expectHeight;
                            ctx.drawImage(this, 0, 0, expectWidth, expectHeight, 0, 0, expectWidth, expectHeight);

                            base64 = canvas.toDataURL("image/jpeg", 0.3);//0.3为降低的品质数
                            //alert(base64.length)
                            //获取图片dom
                            var section = document.createElement('section');
                            section.setAttribute("class", "up-section ");
                            var imgdelete = document.createElement("img");
                            imgdelete.setAttribute("src", "");
                            var img = document.createElement("img");
                            var addimg = document.getElementsByClassName("addimg")[0]
                            //图片路径设置为读取的图片
                            img.src = base64;
                            img.className = "up-img";
                            section.appendChild(img);
                            that.parent().before(section);
                        };
                    };
                    reader.readAsDataURL(file);         

            });

3.请求后台接口

                    var files = list.eq(i).find(".slides-show img");                            
                        var fd = new Array();
                        for(var j = 0; j < files.length; j++) {
                            fd[j] = files[j].src;
                        };
                    $.ajax({
                        url: xxx,
                        type: 'post',
                        data: {
                            token: token,
                            datalist: fd
                        },
                        traditional: true,//fd为数组是需要加
                        //processData: false,
                        //contentType: false,
                        success: function(data) {
                            $(".u-pop").showTip(" 评价成功!");
                            var t = setTimeout(function() {
                                window.history.go(-1);
                                clearTimeout(t);
                            }, 1000);

                        },
                        error: function(e) {
                            $(".u-pop").showTip("评价失败", "", "确定");
                        }
                    });

不足知促没有用formdata做二进制的处理,原因后端暂时不支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值