下面是大神整理的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. Nginx加载模块

    1. /usr/local/nginx/sbin/nginx -V 查看nginx版本与编译安装了哪些模块nginx version: nginx/1.10.3built by gcc 4.4.7 2 ...

  2. 超详解的LNMP搭建并优化

    环境为Centos7 nginx1.14 mysql5.7 php7一,安装Nginx (yum装,快速) yum install nginx二,优化nginx (方便后期工作,如果纯为测试的话,不用 ...

  3. BZOJ2839集合计数

    题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 它们的交集的元素个数为K,求取法的方案数,答案模1000000007.(是质数喔~ ...

  4. 牛客寒假算法基础集训营3处女座和小姐姐（三） （数位dp）

    链接:https://ac.nowcoder.com/acm/contest/329/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  5. ssh整合hibernate 使用spring管理hibernate二级缓存，配置hibernate4.0以上二级缓存

    ssh整合hibernate 使用spring管理hibernate二级缓存,配置hibernate4.0以上二级缓存 hibernate  : Hibernate是一个持久层框架,经常访问物理数据库 ...

  6. MVC Razor

    1.@....    相当于<%=...%> 2.@{}  相当于<%%>,遇到无法自动转换的,需要在前面加@: 3.@()  将某一段代码当做C#代码 4.表单提交name值 ...

  7. 洛谷P4248 差异

    题意:求所有后缀两两之间的最长公共前缀的长度之和. 解:这道题让我发现了一个奇妙的性质:所有后缀两两最长公共前缀长度之和 和 所有前缀两两最长公共后缀之和的值是相等的,但是每一组公共前/后缀是不同的. ...

  8. ImageMagick：获取一行文字的宽与高

    double *fm = MagickQueryFontMetrics(mw_temp, dw_wand, text_utf8); //获取文字在指定字体和字号下的宽度和高度 double textW ...

  9. Linux由浅入深学习 （转）

    转自 => 作者:Vamei 出处:http://www.cnblogs.com/vamei 走进Linux 我从这一部分开始走入Linux.Raspbian是Linux的一个发行版本,而Lin ...

  10. python常用的内置模块

    1.import time time模块与时间相关的功能 在python中时间分为3种 1.时间戳timestamp从1970 1月 1日到现在的秒数 主要用于计算两个时间的差 2.localtime ...