前端代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>使用ajax上传图片，并使用canvas实现出上传进度效果</title>

    <style>

        #myImg {

            border: 1px solid gray;

            border-radius: 8px;

            position: absolute;

            top: 0px;

            left: 0px;

        }

        #myCanvas {

            position: absolute;

            top: 0px;

            left: 0px

        }

    </style>

</head>

<body>

<div>

    <input type="file" id="myFile" style="width: 70px">

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

</div>

<div style="position: relative">

    <img src="" id="myImg" width="200px" height="200px" alt="请选择一张图片">

    <canvas id="myCanvas" width="200px" height="200px">您的浏览器不支持 canvas</canvas>

</div>

</body>

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>

<script>

    //图片预览

    //function(ev) == (ev)=>

    $("#myFile").change((ev) => {

        //将图片的转成blob数据类型

        var imgUrl = URL.createObjectURL(document.getElementById("myFile").files[0]);

        //给img标签的src赋值

        document.getElementById("myImg").src = imgUrl;

        //当图片加载完成时，回收资源，避免浪费，这是一个回调函数

        imgUrl.onload = () => URL.revokeObjectURL(imgUrl);

    });

    /**

     * 压缩图片，然后执行某个任务

     * */

    function compressImgTaskCallback(blob, taskCallback) {

        //创建一个canvas容器

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

        //设置这个容器的宽、高( 使用img的 宽高的一半 )。

        var w = document.getElementById("myImg").naturalWidth / 2,

            h = document.getElementById("myImg").naturalHeight / 2;

        canvas.width = w;

        canvas.height = h;

        //获取在canvas容器绘制的对象

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

        //将向canvas容器绘制图像

        ctx.drawImage(document.getElementById("myImg"), 0, 0, w, h);

        //导出在canvas容器绘制的图像，转成blob类型

        //jpeg -> 有损压缩

        canvas.toBlob(taskCallback, "image/jpeg");

    };

    /**

     * 文件上传进度

     * */

    function fileProgress(r) {

        console.log(r);

        //获取canvas容器

        var mycanvas = document.getElementById("myCanvas");

        //获取在canvas容器绘制的对象

        var ctx = mycanvas.getContext("2d");

        //保存当前绘制环境状态

        ctx.save();

        //清空指定矩形内的像素,参数:x（容器左上角的x坐标） y（容器左上角的y坐标） w（宽度）h（高度）

        ctx.clearRect(0, 0, 200, 200);

        //设置容器的透明度

        ctx.globalAlpha = 0.6;

        //填充‘被绘制’的矩形

        //参数：x（容器左上角的x坐标） y（容器左上角的y坐标） w（宽度）h（高度）

        ctx.fillRect(0, (1 - r) * 200, 200, 200);

        //设置透明度

        ctx.globalAlpha = 1;

        //设置填充颜色

        ctx.fillStyle = "white";

        ctx.font = "20px 微软雅黑";

        //绘制被填充的文本

        //参数: tetx (绘制的文本) x 绘制文本的 x 坐标位置（相对于画布）y  绘制文本的 y 坐标位置（相对于画布）

        //显示百分比

        ctx.fillText(parseInt(r * 100) + '%', 100, 100);

        //返回之前保存绘制的路径和属性

        ctx.restore();

    };

    /**

     * 使用ajax上传blob类型文件

     * @param blob

     * */

    function uploadFile(blob) {

        //将blob存储在FormData中

        var formData = new FormData();

        formData.append("filename", blob);//形成键值对应，伪装成表单的数据

        //发起ajax请求

        $.ajax({

            method: "post",//请求方法

            url: "/imgUpload",//服务器地址

            data: formData,//向服务器传输的数据

            contentType: false,//避免ajax操作请求头部从而丢分界符，造成服务器无法正确识别请求的数据类型

            processData: false,//告诉ajax不要把将传输的数据给序列化了。

            cache: false,//不从浏览器缓存中加载请求头部信息

            xhr: () => {

                //拿到jQuery产生的 XMLHttpRequest对象

                var xhr = $.ajaxSettings.xhr();

                //绑定上用于监听文件上传的进度事件

                xhr.upload.onprogress = (ev) => {

                    //ev.loaded = 当前文件上传的进度

                    //ev.total = 文件的总进度

                    fileProgress(ev.loaded/ev.total);

                };

                return xhr;

            },

            error: (error) => {

                alert("出现错误啦。");

            }

        });

    };

    //上传按钮事件

    function clickUpload() {

        compressImgTaskCallback($("#myFile")[0].files[0], uploadFile);

    };

</script>

</html>

后端接收数据：

 运行效果：

这是一瞬间就完成了加载，

直接下来我们限制一下浏览器传输速度。

在浏览器按F12，（我这里使用的是谷歌浏览器）

使用完后记得恢复回去哦。

设置浏览器传输速度后的运行效果：

写得有点乱，^_^，继续加油。

使用ajax上传图片，并且使用canvas实现出上传进度效果的更多相关文章

  1. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  2. [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  4. AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为

    本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 我在上一篇文章<AntD框架的upload组件上传图片时使用customRequest方法 ...

  5. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  6. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  7. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. html上传图片后，在页面显示上传的图片

    html上传图片后,在页面显示上传的图片 1.html <form class="container" enctype="multipart/form-data&q ...

  9. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

随机推荐

  1. PYTHON TDD学习（一）-->Python 3.4版本环境安装Django及其启动

    1.安装Python3.4版本,原因:3.4及其以后版本默认自带pip工具,非常好用 2.django 安装命令(c:\Python34\Scripts):pip install django 3.s ...

  2. python基础之字典dict

    不可变数据类型:tuple.bool.int.str --可哈希类型可变数据类型:list.dict.set --不可哈希类型dict-key 必须是不可变数据类型,可哈希dict-value 任意数 ...

  3. Tableau常用函数、功能

    Tableau常用函数 创建计算字段: Tableau常用功能

  4. Maven添加镜像仓库、更改本地仓库位置

    添加镜像仓库 在conf目录下的settings.xml文件的145行左右 id表示该镜像的id mirrorOf表示为哪个仓库配置镜像,central为默认的中央仓库的id,也可以使用通配符*,来匹 ...

  5. CF235A 【LCM Challenge】

    这题好毒瘤啊 (特别是long long的坑,调了半天没调好!!)先将你特判一下小于3的话直接输出就是惹,不是的话就判断一下它能不能被2整除如果不能就直接输出n*(n-1)*(n-2)否则进行枚举枚举 ...

  6. mongodb 数据操作(1)

    切换/创建数据库 use test 添加数据db.student.save({name:"J33ack",age:25}) 查看数据库show dbs 删除当前数据库 db.dro ...

  7. 快速幂(Fast_Power)

    定义快速幂顾名思义,就是快速算某个数的多少次幂. 其时间复杂度为 O(log2N), 与朴素的O(N)相比效率有了极大的提高. 以下以求a的b次方来介绍 原理把b转换成2进制数 该2进制数第i位的权为 ...

  8. Codeforces 1196D2. RGB Substring (hard version)

    传送门 考虑枚举每一个位置作为可能子段的起点,然后对以这个位置为起点的所有情况下的答案取 $min$ 当固定了起点 $i$ 并且固定了起点 $i$ 最终的字符时,答案也固定了 发现对于所有与 $i \ ...

  9. Makoto and a Blackboard CodeForces - 1097D (积性函数dp)

    大意: 初始一个数字$n$, 每次操作随机变为$n$的一个因子, 求$k$次操作后的期望值. 设$n$经过$k$次操作后期望为$f_k(n)$. 就有$f_0(n)=n$, $f_k(n)=\frac ...

  10. redis 学习（14）-- HyperLogLog

    HyperLogLog 什么是 HyperLogLog HyperLogLog 是基于 HyperLogLog 算法的一种数据结构,该算法可以在极小空间完成独立数量统计. 在本质上还是字符串类型. 重 ...