前端图片上传，图片预览及过大压缩处理，再转成file文件上传_前端图片压缩后转成file文件上传服务器没有后缀-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src ="">
<input type="file" style="" accept="image/*">
<script src="jquery-1.js"></script>
<script>
    $("input").on("change",select_img);
    function select_img() {//当input file值改变时触发的事件
        console.log($("input")[0].files);
        var img_size = $("input")[0].files[0].size; //用来判断大小
        const reader = new FileReader();//图片预览
        reader.readAsDataURL($("input")[0].files[0]);
        reader.onload = function(e) {
            if (img_size >= 1024 * 1024 *0.1) { //意思是大于0.5m 就进行处理
                console.log("图片太大");
                compressImage(e.target.result);//调用自定义方法来处理图片
            }
            else {
                const src = e.target.result;
                $("img").attr("src",src) ;
            }
        }
    }
    function  compressImage(bdata) {//压缩图片
        console.log(bdata);
        var quality = 1; //压缩图片的质量
        var oldimglength = bdata.length;//压缩前的大小
        var compresRadio = 0;// 压缩率
        var canvas = document.createElement("canvas"); //创建画布
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.src = bdata;
        img.onload = function(){
            var width = img.width;
            var height = img.height;
            canvas.width = 500;   //这里可以自定义你的图片大小
            canvas.height = 500 * (img.height / img.width);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var cdata = canvas.toDataURL("image/png",quality);  //将图片转为Base64 之后预览要用
            $("img").attr("src",cdata);
            var newimglength = cdata.length;
            console.log("img-blob:"+oldimglength);//压缩前大小
            console.log("ctx-blob:"+newimglength) ;//压缩后大小
            compresRadio = (((oldimglength-newimglength)/oldimglength*100).toFixed(2))+'%';
            console.log("压缩率:"+compresRadio)
            var arr = cdata.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            console.log(new File([u8arr],"压缩", {type:mime}))
        }
    }


</script>
</body>
</html>