前端代码:
使用ajax上传图片,并使用canvas实现出上传进度效果#myImg {
border: 1px solid gray;
border-radius: 8px;
position: absolute;
top: 0px;
left: 0px;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px
}
您的浏览器不支持 canvas
//图片预览
//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);
};
后端接收数据:
运行效果:
这是一瞬间就完成了加载,
直接下来我们限制一下浏览器传输速度。
在浏览器按F12,(我这里使用的是谷歌浏览器)
使用完后记得恢复回去哦。
设置浏览器传输速度后的运行效果:
写得有点乱,^_^,继续加油。
[Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为
本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 我在上一篇文章
【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
基于jquery ajax的多文件上传进度条
效果图 前端代码,基于jquery
主页 < ...python django + js 使用ajax进行文件上传并获取上传进度案例
[LeetCode] Binary Tree Zigzag Level Order Traversal
Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...
(转)【ASP.NET Web API】Authentication with OWIN
概述 本文说明了如何使用 OWIN 来实现 ASP.NET Web API 的验证功能,以及在客户端与服务器的交互过程中,避免重复提交用户名和密码的机制. 客户端可以分为两类: JavaScript: ...
DWR在Spring中应用
这里以传递一个对象为例,来说明dwr在Spring中是怎么配置的. JSP页面:
转自 http://www.cnblogs.com/akwwl/p/3232679.html 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1 ...
JS拖拽原理
实现拖拽效果主要跟鼠标的三个事件有关: onmousedown : 选择要拖拽的元素 onmousemove : 移动元素 onmouseup : 释放元素 三个事件的关系: obj.onmoused ...
C++11标准后的C++阅读书目
C++11标准后的C++阅读书目 投递人 itwriter 发布于 2013-09-25 19:44 评论(2) 有285人阅读 原文链接 [收藏] « » 英文原文:C++ Reading L ...
java学习笔记 --- 继承
继承 (1)定义:把多个类中相同的成员给提取出来定义到一个独立的类中.然后让这多个类和该独立的类产生一个关系, 这多个类就具备了这些内容.这个关系叫继承. (2)Java中如何表示继承呢?格式 ...