下面是大神整理的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. [USACO08DEC]在农场万圣节Trick or Treat on the Farm【Tarja缩点+dfs】

    题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N<=100,000)个牛棚隔间中留下的糖果,以此来庆祝美国秋天的万圣节. 由于牛棚不太大,FJ通过指定奶牛必须遵 ...

  2. 【转】设置 vim 显示行号永久有效

    在linux环境下,vim是常用的代码查看和编辑工具.在程序编译出错时,一般会提示出错的行号,但是用vim打开的代码确不显示行号,错误语句的定位非常不便.那么怎样才能让vim显示代码的行号呢? 1 临 ...

  3. JMeter5.1企业级应用应用常用功能详解（含插件安装）

    apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.jmeter可以模拟大量的服务器负载,并且jmeter提供图形化的性能分析. JM ...

  4. Equivalent Sets HDU - 3836 （Tarjan）

    题目说给出一些子集,如果A是B的子集,B是A的子集,那么A和B就是相等的,然后给出n个集合m个关系,m个关系表示u是v的子集,问你最小再添加多少个关系可以让这n个集合都是相等的 如果这n个几个都是互相 ...

  5. p1184高手之在一起

    P1184 题目背景 高手是可以复活的,这点我们大家都知道. 题目描述 高手列出了一个详尽的日程表,这次他要追求的则是一个心灵纯洁的小萝莉.他和她都是要上课的,但是也会有时间空闲,于是高手决定无时无刻 ...

  6. 牛客练习赛43 Tachibana Kanade Loves Probability(快速幂)

    链接:https://ac.nowcoder.com/acm/contest/548/B来源:牛客网 题目描述 立华奏在学习初中数学的时候遇到了这样一道大水题: “设箱子内有 n 个球,其中给 m 个 ...

  7. Python3 与 C# 并发编程之～ 线程篇

      2.线程篇¶ 在线预览:https://github.lesschina.com/python/base/concurrency/3.并发编程-线程篇.html 示例代码:https://gith ...

  8. Django 数据库常见操作

    首先要配置数据映射具体在这个连接里 https://www.cnblogs.com/Niuxingyu/p/10296143.html Django 建立数据库模型 #导包导入django数据库类 f ...

  9. Django（十）COOKIE和session

    https://www.cnblogs.com/haiyan123/p/7763169.html from django.shortcuts import render,redirect # Crea ...

  10. latex 双引号 “

    别在latex敲,在记事本上敲完后,拷贝到latex中.