下面是大神整理的demo，很实用，这里存一下备用，感谢大神！

此demo为大于1M对图片进行压缩上传

若小于1M则原图上传，可以根据自己实际需求更改。

demo源码如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>XMLHttpRequest上传文件</title>

    <script type="text/javascript">

        /*

        三个参数

        file：一个是文件(类型是图片格式)，

        w：一个是文件压缩的后宽度，宽度越小，字节越小

        objDiv：一个是容器或者回调函数

        photoCompress()

         */

        function photoCompress(file,w,objDiv){

            var ready=new FileReader();

            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/

            ready.readAsDataURL(file);

            ready.onload=function(){

                var re=this.result;

                canvasDataURL(re,w,objDiv)

            }

        }

        function canvasDataURL(path, obj, callback){

            var img = new Image();

            img.src = path;

            img.onload = function(){

                var that = this;

                // 默认按比例压缩

                var w = that.width,

                    h = that.height,

                    scale = w / h;

                w = obj.width || w;

                h = obj.height || (w / scale);

                var quality = 0.7;  // 默认图片质量为0.7

                //生成canvas

                var canvas = document.createElement('canvas');

                var ctx = canvas.getContext('2d');

                // 创建属性节点

                var anw = document.createAttribute("width");

                anw.nodeValue = w;

                var anh = document.createAttribute("height");

                anh.nodeValue = h;

                canvas.setAttributeNode(anw);

                canvas.setAttributeNode(anh);

                ctx.drawImage(that, , , w, h);

                // 图像质量

                if(obj.quality && obj.quality <=  && obj.quality > ){

                    quality = obj.quality;

                }

                // quality值越小，所绘制出的图像越模糊

                var base64 = canvas.toDataURL('image/jpeg', quality);

                // 回调函数返回base64的值

                callback(base64);

            }

        }

        /**

         * 将以base64的图片url数据转换为Blob

         * @param urlData

         *            用url方式表示的base64图片数据

         */

        function convertBase64UrlToBlob(urlData){

            var arr = urlData.split(','), mime = arr[].match(/:(.*?);/)[],

                bstr = atob(arr[]), n = bstr.length, u8arr = new Uint8Array(n);

            while(n--){

                u8arr[n] = bstr.charCodeAt(n);

            }

            return new Blob([u8arr], {type:mime});

        }

        var xhr;

        //上传文件方法

        function UpladFile() {

            var fileObj = document.getElementById("file").files[]; // js 获取文件对象

            var url = "后台图片上传接口"; // 接收上传文件的后台地址 

            var form = new FormData(); // FormData 对象

            if(fileObj.size/ > ) { //大于1M，进行压缩上传

                photoCompress(fileObj, {

                    quality: 0.2

                }, function(base64Codes){

                    //console.log("压缩后：" + base.length / 1024 + " " + base);

                    var bl = convertBase64UrlToBlob(base64Codes);

                    form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象

                    xhr = new XMLHttpRequest();  // XMLHttpRequest 对象

                    xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

                    xhr.onload = uploadComplete; //请求完成

                    xhr.onerror =  uploadFailed; //请求失败

                    xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

                    xhr.upload.onloadstart = function(){//上传开始执行方法

                        ot = new Date().getTime();   //设置上传开始时间

                        oloaded = ;//设置上传开始时，以上传的文件大小为0

                    };

                    xhr.send(form); //开始上传，发送form数据

                });

            }else{ //小于等于1M 原图上传

                form.append("file", fileObj); // 文件对象

                xhr = new XMLHttpRequest();  // XMLHttpRequest 对象

                xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

                xhr.onload = uploadComplete; //请求完成

                xhr.onerror =  uploadFailed; //请求失败

                xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

                xhr.upload.onloadstart = function(){//上传开始执行方法

                    ot = new Date().getTime();   //设置上传开始时间

                    oloaded = ;//设置上传开始时，以上传的文件大小为0

                };

                xhr.send(form); //开始上传，发送form数据

            }

        }

        //上传成功响应

        function uploadComplete(evt) {

            //服务断接收完文件返回的结果

            var data = JSON.parse(evt.target.responseText);

            if(data.success) {

                alert("上传成功！");

            }else{

                alert("上传失败！");

            }

        }

        //上传失败

        function uploadFailed(evt) {

            alert("上传失败！");

        }

        //取消上传

        function cancleUploadFile(){

            xhr.abort();

        }

        //上传进度实现方法，上传过程中会频繁调用该方法

        function progressFunction(evt) {

            var progressBar = document.getElementById("progressBar");

            var percentageDiv = document.getElementById("percentage");

            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0

            if (evt.lengthComputable) {//

                progressBar.max = evt.total;

                progressBar.value = evt.loaded;

                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * ) + "%";

            }

            var time = document.getElementById("time");

            var nt = new Date().getTime();//获取当前时间

            var pertime = (nt-ot)/; //计算出上次调用该方法时到现在的时间差，单位为s

            ot = new Date().getTime(); //重新赋值时间，用于下次计算

            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b

            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

            //上传速度计算

            var speed = perload/pertime;//单位b/s

            var bspeed = speed;

            var units = 'b/s';//单位名称

            if(speed/>){

                speed = speed/;

                units = 'k/s';

            }

            if(speed/>){

                speed = speed/;

                units = 'M/s';

            }

            speed = speed.toFixed();

            //剩余时间

            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed();

            time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';

            if(bspeed==) time.innerHTML = '上传已取消';

        }

    </script>

</head>

<body>

<progress id="progressBar" value="" max="" style="width: 300px;"></progress>

<span id="percentage"></span><span id="time"></span>

<br /><br />

<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>

<input type="button" onclick="UpladFile()" value="上传" />

<input type="button" onclick="cancleUploadFile()" value="取消" />

</body>

</html>

https://www.cnblogs.com/007sx/p/7583202.html

js 图片压缩上传(纯js的质量压缩，非长宽压缩)的更多相关文章

  1. 前端图片压缩上传(纯js的质量压缩，非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  2. 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  3. 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...

  4. 图片上传 纯js编码

    ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  5. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  6. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  7. js 图片压缩上传（base64位）以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  8. JS—图片压缩上传（单张）

    *vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

  9. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

随机推荐

  1. Hdoj 1785.You Are All Excellent 题解

    Problem Description 本次集训队共有30多人参加,毫无疑问,你们都是很优秀的,但是由于参赛名额有限,只能选拔部分队员参加省赛.从学校的角度,总是希望选拔出最优秀的18人组成6支队伍来 ...

  2. django从零开始-模板

    1.应用中添加模板 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contentt ...

  3. LVS搭建负载均衡（二）DR模型

    应用场景:LVS配置负载均衡方式之一:dr 测试环境: 配置步骤: 1. 在主机lvs上安装ipvsadm ~]# yum install ipvsadm -y ~]# ipvsadm //启动:该命 ...

  4. CodeForces - 95B（DFS）

    题目链接:http://codeforces.com/problemset/problem/95/B 题目大意:给你一个正整数n (1 ≤ n ≤ 10100000),求不大小于它的超级幸运数字(超级 ...

  5. POJ--1797 Heavy Transportation (最短路）

    题目电波: POJ--1797 Heavy Transportation n点m条边, 求1到n最短边最大的路径的最短边长度 改进dijikstra,dist[i]数组保存源点到i点的最短边最大的路径 ...

  6. A1098. Insertion or Heap Sort

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  7. [luogu3810][bzoj3262][陌上花开]

    题目链接 思路 听说可以CDQ分治,然后我不会,所以我写树套树 首先肯定先按照a拍个序.然后就成了在b,c这两个数组中查询了.用一个树状数组套treap来维护.当插入一个数的时候,就在树状数组的b这个 ...

  8. pandas中遍历dataframe的每一个元素

    假如有一个需求场景需要遍历一个csv或excel中的每一个元素,判断这个元素是否含有某个关键字 那么可以用python的pandas库来实现. 方法一: pandas的dataframe有一个很好用的 ...

  9. numpy 多维数组及数组操作

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  10. Flask filter过滤器

    简单的数据集体添加样式输出用管道过滤,除了flask模块以外不需要导其他的包 <head> <meta charset="UTF-8"> <meta ...