使用canvas上传图片+上传进度
实现效果:
速度过快，调式浏览器方式:F12
后台java代码
public String imageshangchuan(@RequestPart("xxx") MultipartFile multipartFile, Model model, HttpServletRequest request) {
if (!multipartFile.getContentType().contains("image/")) {
model.addAttribute("err", "只能是图片文件！");
return "/inputfile";
}
if (multipartFile.getSize() > 1024 * 1024 * 5) {
model.addAttribute("err", "只能是5M以下！");
return "/inputfile";
}
//取得相对路径
String basePath = request.getServletContext().getRealPath("/img");
File files = new File(basePath);
if(!files.exists()){
files.mkdir();
}
String rekativePath;
try {
rekativePath = makeImagePath(basePath, multipartFile.getOriginalFilename());
File file = new File(rekativePath);
file.getParentFile().mkdir();
multipartFile.transferTo(file);
} catch (IOException e) {
model.addAttribute("err", "上传失败，请重试");
return "/inputfile";
}
return "/index";
}
public String makeImagePath (String basePath, String fileName){
Date date = new Date();
//String[] filename = simpleFile(fileName);
return String.format("%s%s%s%supload_%s_%s.%s",
basePath,
File.separator,
new SimpleDateFormat("yyyyMMdd").format(date),
File.separator,
"11",
new SimpleDateFormat("hhmmss").format(date),
"jpg"
);
}
public String[] simpleFile (String file){
int sum = file.lastIndexOf(".");
return new String[]{
file.substring(0, sum),
file.substring(sum + 1)
};
}
方法一：canvas实现
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;"> </canvas>
<button onclick="test()">提交</button>
<script src="css/jquery-1.11.3.js"></script>
<script>
//选择图片后
myfile.onchange=function () {
createURLImg(myfile.files[0]);
}
var pen=myCanvas.getContext("2d");
//加载入canvas
function createURLImg(file,callback) {
var imgUrl=URL.createObjectURL(file);
var image=new Image();
image.src=imgUrl;
image.onload=function (ev) {
pen.drawImage(image,0,0,200,250);
if(callback) callback();
URL.revokeObjectURL(imgUrl);
}
}
//提交按钮
function test() {
myCanvas.toBlob(function (result) {
var form=new FormData();
form.append("xxx",result);
ajax(form);
})
} function biafenb(r) {
if(!pen) pen=myCanvas.getContext("2d");
pen.save();
pen.globalAlpha=0.3;
pen.fillRect(0,(1-r)*200,200,250);
pen.globalAlpha=1;
pen.fillStyle = "white";
pen.font = "20px 微软雅黑";
pen.textAlign='center';
pen.fillText(Math.round(r*100)+"%",100,100);
pen.restore();
} function ajax(formData) {
$.ajax({
url:"/bbbbb",
type:"post",
Accept:"html/text;chatset=utf-8",
contentType:false,
data:formData,
processData:false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
myXhr.upload.onprogress=function (ev) {
pen.clearRect(0,0,200,250);
createURLImg(myfile.files[0],function () {
biafenb(ev.loaded/ev.total);
})
}
return myXhr;
}, success: function (data) {
console.log("上传成功!!!!");
}, error: function () {
console.log("上传失败！");
}
})
}
</script>
</body>
</html>
方法二：img+canvas实现
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas + ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#myimg {
border: 3px solid gray;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
}
#mymask {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body> <div class="container">
<div style="margin-top: 2em;">
<input type="file" id="myfile" style="display: none"> <!-- 选择文件后，要预览 -->
<button class="btn btn-primary" onclick="myfile.click()">选择图片</button>
<button class="btn btn-primary" onclick="clickMe()">上传图片</button>
</div> <div style="position: relative">
<img src="" id="myimg" title="暂时没有上传" width="200" height="200"/>
<canvas id="mymask" width="200" height="200">不支持canvas</canvas>
</div>
</div> <script> var ctx;
myfile.onchange = () => { // 预览图片
var imgUrl = URL.createObjectURL(event.target.files[0]);
myimg.src = imgUrl;
myimg.onload = () => URL.revokeObjectURL(imgUrl); }; function clickMe() {
compressImgWithCanvas(myfile.files[0], uploadWithAJAX);
} /**
* 压缩图片，然后执行某些任务
*/
function compressImgWithCanvas(blob, taskCallback) {
var rat = 2;
var w = myimg.naturalWidth / rat, h = myimg.naturalHeight / rat; var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h; var ctx = canvas.getContext('2d');
ctx.drawImage(myimg, 0, 0, w, h);
ctx.fillText("nf147", w - 20, h - 20); canvas.toBlob(taskCallback, "image/jpeg");
} /**
* 更新预览进度
*/
function refreshProgress(r) {
if (!ctx) ctx = mymask.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, 200, 200);
ctx.globalAlpha = 0.6;
ctx.fillRect(0, (1 - r) * 200, 200, 200);
ctx.globalAlpha = 1;
ctx.fillStyle = "white";
ctx.font = "20px 微软雅黑";
ctx.fillText(r * 100 + '%', 80, 180);
ctx.restore();
} /**
* 通过 AJAX 上传 blob 类型的文件
* @param blob
*/
function uploadWithAJAX(blob) {
var fd = new FormData();
fd.append("xxx", blob); $.ajax({
method: 'post',
url: "/bbbbb",
cache: false,
contentType: false,
data: fd,
processData: false,
xhr: () => {
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = (ev) => {
refreshProgress(ev.loaded / ev.total);
};
return xhr;
}
}).done(console.log)
.fail((xhr, staus, err) => console.error(xhr, staus, err)); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
使用canvas上传图片+上传进度的更多相关文章
- 使用ajax上传图片，并且使用canvas实现出上传进度效果
前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...
- [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 安卓自定义View实现图片上传进度显示（仿QQ）
首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...
- .NetCore多文件上传进度的示例
主要讲的内容有: 1-----form方式上传一组图片 2-----ajax上传一组图片 3-----ajax提交+上传进度+一组图片上传 4-----Task并行处理+ajax提交+上传进度+一组图 ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
随机推荐
- java Folder transform to Source Folder
右键文件夹然后选择Build Path ===>Use as Source Folder 里面的东西现在就可以编译了 然后想要让一个源码包变成一个文件夹的话: 只需要再次右键源码包==>选 ...
- 【ExtJS】关于自定义组件
一.命名规范 在你编码过程中对类,名字空间以及文件名使用统一的命名规则对你代码的组织,结构化以及可读性有很大的好处. 1.类命名规范: 类名最好只包含字母,在多数情况下,数字是不鼓励使用的,除非非要用 ...
- python中时间对象生成及时间格式的转换
1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...
- 守护客户数据价值：企业级NewSQL HTAP分布式云TBase架构详解
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:jasonys,隶属于腾讯技术工程事业群数据平台部,负责TBase数据的技术研发和架构设计,有超过10年的数据库内核开发设计经验,完成 ...
- java XML解析成Map
1.需要解析的文件.xml <?xml version="1.0" encoding="UTF-8"?> <request> <r ...
- Oracle 过程中变量赋值
create or replace function get_sal1(id employees.employee_id%type) return number is sal employees.sa ...
- UML建模—EA创建Class(类图)
1.新建类图 2.添加类或接口 在类图可以捕获系统-类-和模型组件的逻辑结构.它是一个静态模型,描述存在什么,有哪些属性和行为,而不管如何去做. 说明关系之间的类和接口; 泛化. 聚合和关联是在分别反 ...
- 关于FileFOutputStream应用中的FileNotFoundException问题
在使用fileoutputstream时经常出现FileNotFoundException问题,即便是同一个程序(可行)改了一下包名再重新编译,就会无缘无故的抛出FileNotFoundExcepti ...
- js之可迭代对象
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...
- IO流之IO的异常处理
如果发生了IO的异常.我们在实际开发中,对异常时如何处理的,我们来演示一下. public class FileOutputStreamDemo3 { public static void main( ...