前端代码：

<%@ 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. Linux C/C++基础——二级指针做形参

    1.二级指针做形参 #include<stdio.h> #include<stdlib.h> void fun(int **temp) { *temp=(int*)malloc ...

  2. 论文翻译：LP-3DCNN: Unveiling Local Phase in 3D Convolutional Neural Networks

    引言 传统的3D卷积神经网络(CNN)计算成本高,内存密集,容易过度拟合,最重要的是,需要改进其特征学习能力.为了解决这些问题,我们提出了整流局部相位体积(ReLPV)模块,它是标准3D卷积层的有效替 ...

  3. 使用Themleaf 模板引擎手动生成html文件

    1.为什么要写这一篇呢? 在做一个邮件发送功能的时候,需要发送html邮件,javaMail 发送html 的时候需要有已经生成的html正文,所以需要提前将要发送的内容生成,所以就需要模板引擎来动态 ...

  4. Entity Framework常用方法及案例

    ⒈Skip(int count) 说明:跳过集合的前n个元素:延迟.即我们跳过给定的数目返回后面的结果集. ⒉Take(int count) 说明:获取集合的前n个元素:延迟.即只返回限定数量的结果集 ...

  5. MySQL数据库增删改查SQL语句（2018整理集合大全）

    查看数据库 show databases;  使用数据库 use 数据库名; 创建数据库 CREATE DATABASE 数据库名; 删除数据库 DROP DATABASE 数据库名; 创建表 cre ...

  6. MySQL中出现的小问题

    ./scripts/mysql_install_db: line 249: /app/mysql/bin/my_print_defaults: cannot execute binary fileNe ...

  7. Hadoop组成架构

    Hadoop是apache用来“处理海量数据存储和海量数据分析”的分布式系统基础架构,更广义的是指hadoop生态圈.Hadoop的优势 高可靠性:hadoop底层维护多个数据副本,即使某个计算单元故 ...

  8. C# 文件基本操作

    概括的说,File,FileInfo,FileStream是用于文件 I/O 的类,StreamReader是用于从流读取和写入流的类,使用之前都需using System.IO. 先定义一个TXT文 ...

  9. Zookeeper报错Will not attempt to authenticate using SASL解决办法

      版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq642159746/article/ ...

  10. Gsview裁剪EPS文件

    (1)菜单栏  “options--show bounding boxs”  选中. (2)打开eps图,然后File->PS TO EPS,不选择Automatically calculate ...