使用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以前,实现这样的进度条并不容易 ...
随机推荐
- QT跟VC++结合来进行插件的验证机制
由于最近公司要开发一个以C++插件机制为主的,主要有一个问题就是C++的二进制兼容性的问题.一旦类使用虚函数,只要随便改动下增删查改下头文件的虚函数,就会导致程序在跑的时候进行乱跳,因为这个时候exe ...
- Angular4+NodeJs+MySQL 入门-05 接口调用
接口调用 今天讲一下,如果在前端页面上通过调用后台接口,返回来的数据.把前面的几章结合起来. 这里所有用的代码在 https://github.com/xiaotuni/angular-map-htt ...
- HRBUST 1161——Leyni——————【线段树单点更新，区间查询】
Leyni Time Limit: 3000 MS Memory Limit: 65536 KB 64-bit integer IO format: %lld , %llu Java class na ...
- springboot整合rabbitmq,支持消息确认机制
安装 推荐一篇博客https://blog.csdn.net/zhuzhezhuzhe1/article/details/80464291 项目结构 POM.XML <?xml version= ...
- 介绍几种搭建Dojo环境的方法
Hello World! 的时间到了,在你所学过的众多语言中,哪个不是从此学起的呢?但在此之前,我们要先构建一个开发环境,如同刚开始学习Java的时候,还是需要我们先安装JDK.配置好环境变量等等,H ...
- MAC 下安装RabbitMQ
1.使用brew来安装 RabbitMQ(地址:http://www.rabbitmq.com/install-standalone-mac.html ) 2.安装目录 /usr/local/Cell ...
- 11、幻灯片：Slides
/* ---ts----*/ import { Page,Slides } from 'ionic-angular'; import { ViewChild } from '@angular/core ...
- C# tcp udp 串口 通信
简单的实现tcp同步和异步,udp,串口通信 static List<TcpClientState> clientArray = new List<TcpClientState> ...
- Java集合篇四：Map的基本应用
package com.test.collection; import java.util.HashMap; import java.util.Hashtable; import java.util. ...
- CRM——销售与客户
一.销售与客户——表结构 1.客户类型 (1)公共客户(公共资源) 必备条件:没有报名: 在必备条件满足的情况下,满足以下任意条件都是公共客户: 3天没有跟进:15天没有成单. (2)我的客户 原销售 ...