移动端（h5）上传,压缩，预览图片

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

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做二进制的处理，原因后端暂时不支持。