前端代码：

<%@ 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爬虫学习==>第十章：使用Requests+正则表达式爬取猫眼电影

    学习目的: 通过一个一个简单的爬虫应用,初窥门径. 正式步骤 Step1:流程框架 抓取单页内容:利用requests请求目标站点,得到单个页面的html代码,返回结果: 正则表达式分析:根据html ...

  2. python-https状态码

    HTTP状态码状态码的职责是当客户端向服务器发送请求时,描述返回的请求结果.借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了错误. 状态码的类别 >>>状态码 类别 说明 ...

  3. LeetCode.1128-等价多米诺骨牌对的数量(Number of Equivalent Domino Pairs)

    这是小川的第394次更新,第428篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第259题(顺位题号是1128).给定多米诺骨牌列表,当且仅当(a == c且b == d ...

  4. hadoop的单机配置

    hadoop的单机配置 准备工作 利用vim /etc/sysconfig/network命令修改主机名称. Ssh security shell 远程登录 登录远程服务器 $ ssh user@ho ...

  5. 使用CompletableFuture进行异步任务编排

    1.JDK5引入了Future进行异步任务的处理,Future 的接口主要方法有以下几个: (1)boolean cancel (boolean mayInterruptIfRunning) 取消任务 ...

  6. 数据结构之二叉树篇卷四 -- 二叉树线索化（With Java)

    一.线索二叉树简介 二叉树本身是一种非线性结构,然而当你对二叉树进行遍历时,你会发现遍历结果是一个线性序列.这个序列中的节点存在前驱后继关系.因此,如何将这种前驱后继信息赋予给原本的二叉树呢?这就是二 ...

  7. 2019中山纪念中学夏令营-Day19 数论初步【GCD（最大公约数），素数相关】

    关于GCD的一些定理或运用的学习: 1. 2.二进制算法求GCD 思想:使得最后的GCD没有2(提前把2提出来) 代码实现: #include <cstdio> #define int l ...

  8. Memcached安装 常用指令

    Memcached 源码安装 # 安装依赖yum install -y gcc gcc-c++ automake autoconf make cmake libevent-devel.x86_64# ...

  9. Codeforces 1221B. Knights

    传送门 看到棋盘上跳马,发现如果把棋盘黑白染色,那么每次移动都是从白点到黑点,从黑点到白点 所以直接根据黑白染色判断每个位置的马的颜色即可 #include<iostream> #incl ...

  10. IntelliJ IDEA 复杂的重构技巧

    IntelliJ IDEA 复杂的重构技巧(二) 转载 上次我说了一些 "复杂的重构技巧" ,讲的是一些使用 IntelliJ 的简单功能实现复杂的重构需求的技巧. 看到大家的反响 ...