前端代码：

<%@ 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. mysql账户授权

    mysql新加用户及授权 --登录数据库mysql -uroot -p --查询当前用户1.SELECT User, Host FROM mysql.user;2.select host,user,a ...

  2. python利用smtp发送邮件

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # author:IversOn5 import requests import json import ...

  3. hadoop的目录结构介绍

    hadoop的目录结构介绍 解压缩hadoop 利用tar –zxvf把hadoop的jar包放到指定的目录下. tar -zxvf /home/software/aa.tar.gz -C /home ...

  4. springboot_redis

    1.引入redis的启动器 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  5. jmeter—获取当前时间（年、月、日），往前/往后n天

    import java.util.Calendar; Calendar cal = Calendar.getInstance(); int day = cal.get(Calendar.DATE); ...

  6. JS小知识--获取当前日期的时间和上周五时间

    获取当前日期的时间和上周五时间 var today=new Date();//获取当前时间var weekday=today.getDay();//获取星期几    var monday=new Da ...

  7. spark教程(九)-操作数据库

    数据库也是 spark 数据源创建 df 的一种方式,因为比较重要,所以单独算一节. 本文以 postgres 为例 安装 JDBC 首先需要 安装 postgres 的客户端驱动,即 JDBC 驱动 ...

  8. CVE-2018-18955漏洞学习

    简介 这是名称空间的漏洞,文章先介绍user namespaces的简单只是,然后从补丁入手,分析源码,找到漏洞出现的原因.因为对这块的源码不是那么熟悉,所以着重描述源码分析的部分,其他可以参考末尾的 ...

  9. 在web项目中配置log4j

    在web.xml中添加如下代码 <context-param> <param-name>contextConfigLocation</param-name> < ...

  10. css背景图自适应全屏显示

    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...