使用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刷题知识点之拥塞发生的主要原因、TCP拥塞控制、TCP流量控制、TCP拥塞控制的四大过程（慢启动、拥塞避免、快速重传、快速恢复）
不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 ...
- maven pom.xml指定jdk
<plugins> <!-- 指定jdk --> <plugin> <groupId>org.apache.maven.plugins</grou ...
- poj 1028 Web Navigation
Web Navigation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31088 Accepted: 13933 ...
- IE中使用TerraExplorerPro ActiveX控件问题总结
近段时间,由于工作需要,涉及到Skyline Web的二次开发,遇到一些问题: 问题1:IE中无法使用Skyline 提供的ActiveX Component 的API 解决方法:这个问题一般是没有正 ...
- Ubuntu通过xinput禁用及启用联想笔记本的触摸板
查看设备列表 通过xinput先查看一些都有哪些设备 xinput #或者 xinput list 显示结果如下 ddd@ddd:~$ xinput list Virtual core p ...
- 中文输入法无法在 QtCreator（Linux） 中输入汉字
中文输入法无法在 QtCreator(Linux) 中输入汉字 环境 system: Deepin 15.7 Qt Creator 4.7.0 (GCC 5.3.1) 解决方法 下载 fcitx-qt ...
- java I/O流 温习随笔
java I/O流的熟练掌握是十分重要的. 在我的理解中,I/O流可以分为两种:字符流.字节流.字符流就是可以用来传输字符的流,比如传输txt文本,简单的说,只有能被电脑中的记事本直接打开并且你能看懂 ...
- SpringSecurity 3.2入门（1）框架介绍
关于Spring Security Spring Security,这是一种基于Spring AOP和Servlet过滤器 [7] 的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法 ...
- IIS发布常见错误-HTTP 错误 404.0 - Not-Found
错误信息:HTTP 错误 404.0 - Not-Found 错误代码:0x80070002 原 因:IIS配置错误. 解决方法:我配置IIS时漏掉了下面几项,一定要记得勾选.
- Java 的版本历史与特性
Java SE 8[2014-03-14发行] Lambda表达式 Pipelines和Streams Date和Time API Default方法 Type注解 Nashhorn JavaScri ...