如何压缩后上传大文件
知识点
1 HTML5 可以通过 onchange来监听 input type=file
$('.js_file').on('change', function(event) {
//do something
});
2 可以通过change事件的回调参数,得到文件对象。
var files = event.target.files;
3 可以通过FileReader类读取文件
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload= function(e){
//do something
}
4 可以创建一个Image类,
var img = new Image();
img.src = e.target.result; //刚才reader读取的结果放到img中。。。
5 可以动态创建一个canvas
var c = new Canvas();
c.width = 100;
c.height = 200;
var ctx = c.getContext("2d");
ctx.drawImage(img,......);
6 可以通过toDataURL变成一个base64编码的url
var base64 = canvas.toDataURL('image/png');
css中背景图片怎么实现?
background-image:url(aa.jpg);
background-image:url(base64:...........);
7 canvas中的图片如何变成一个blob。
canvas.toBlob(function(blob){
});
可以变成一个blob对象。
8 上传,创建一个XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("fileData", blob);//fileData为自定义
fd.append("fileName", "haha.jpg");
// 开始上传
xhr.open("POST", 'http://127.0.0.1:8080/uploadimg', true);
xhr.send(fd);
实现思路
1.可以预览图片
2.可以上传图片到服务器
3.点击删除图片
技术关键点
1.weui框架修饰
2.html 5后可以读取用户选中的文件(预览图片)
3.on change事件来规定选中的图片
4.使用canves和回调函数来实现压缩预览图片
5.通过blob方法实现上传图片到控制器
6.在控制器中把图片保存
实现流程
weui调用 type=”file” 的方法来实现上传文件
选中新文件的处理:页面加载成功后自动调用方法
// 允许上传的图片类型,定义的数组
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
// 文件最大 1MB
var maxSize = 1024 * 1024;
// 图片最大宽度
var maxWidth = 300;
// 最大上传图片数量
var maxCount = 6;
点击之后触发on change事件
$('.js_file').on('change', function(event) {
var files = event.target.files;
// 如果没有选中文件,直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.weui.alert({
text: '该类型不允许上传'
});
continue;
}
// 如果图片超过预设最大大小,弹出警示框
if (file.size > maxSize) {
$.weui.alert({
text: '图片太大,不允许上传'
});
continue;
}
// 上传图片数量超过预设数量,弹出警示框
if ($('.weui_uploader_file').length >= maxCount) {
$.weui.alert({
text: '最多只能上传' + maxCount + '张图片'
});
return;
}
对用户选中的图片进行压缩处理,做出预览,并上传到服务器
// 定义reader,用来读取用户选中的文件
var reader = new FileReader();
//读取成功之后,回调图片内容
reader.onload = function(e) {
//创建一个空白的图片
var img = new Image();
//加载成功后的回调函数
img.onload = function() {
// 不要超出最大宽度,和图片比找出宽度最小值
var w = Math.min(maxWidth, img.width);
// 高度按比例计算,保证等比例缩放
var h = img.height * (w / img.width);
//创建一个canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度(上面算出的)
canvas.width = w;
canvas.height = h;
//把缩放的预览图片画到空白img里
ctx.drawImage(img, 0, 0, w, h);
//把图片变成一个base64的数据,Base64就是一种基于64个可打印字符来表示二进制数据的方法
var base64 = canvas.toDataURL('image/png');
//上传图片!!!
//toBlob 把图片变成一个blob对象;function是个回调函数
canvas.toBlob(function (blob) {
//alert("blob is created");
// 图片ajax上传,创建了一个异步对象(XMLHttpRequest)
var xhr = new XMLHttpRequest();
// 创建formdata表单数据
var fd = new FormData();
//fileData为自定义,数据传给数据本身
fd.append("fileData", blob);
//数据传给文件名
fd.append("fileName", "haha.jpg");
// 开始上传,通过post传到控制器里
xhr.open("POST", 'http://127.0.0.1:8080/uploadimg', true);
xhr.send(fd);
});
// 插入到预览区
//创建一个动态的li节点
//给onclink加一个删除图片的效果
var $preview = $('<li onclick="removeImg(this)" class="weui_uploader_file weui_uploader_status"
//用css方法background-image加图片的base64编码显示
style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
//把图片加到上传图片的文件列表中
$('.weui_uploader_files').append($preview);
//把图片大小显示出来
var num = $('.weui_uploader_file').length;
$('.js_counter').text(num + '/' + maxCount);
// 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
var progress = 0;
//一个模拟上传,运用定时器,只有百分比显示的效果
function uploading() {
$preview.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 2);
} else {
// 如果是失败,塞一个失败图标
//$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
}
}
setTimeout(uploading, 2);
};
//图片文件的内容给src,这样图片可以开始加载
img.src = e.target.result;
};
//读取选中的文件
reader.readAsDataURL(file);
在控制器中保存和修改图片文件名
//上传图片
public void uploadimg(){
header("Access-Control-Allow-Origin", "*");
//输出blob数据
output("haha is "+param("fileData"));
//自动把数据存入一个文件里
String realpath = application.getRealPath(param("fileData"));
File f = new File(realpath);
//把文件后缀名.null改为.jpg
f.renameTo(new File(realpath.replace("null", "jpg")));
}
下面是完整的源代码。。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>weui uploader上传-jq22.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
</style>
</head>
<body>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css">
<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<div class="container">
<div class="weui_cells_title">上传</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<div class="weui_uploader">
<div class="weui_uploader_hd weui_cell">
<div class="weui_cell_bd weui_cell_primary">图片上传</div>
<div class="weui_cell_ft js_counter">0/6</div>
</div>
<div class="weui_uploader_bd">
<ul class="weui_uploader_files">
<!-- 预览图插入到这 --> </ul>
<div class="weui_uploader_input_wrp">
<input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui_dialog_alert" style="display: none;">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"> <strong class="weui_dialog_title">警告</strong>
</div>
<div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>
<div class="weui_dialog_ft">
<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
</div>
</div>
</div>
<script>
$.weui = {};
$.weui.alert = function(options) {
options = $.extend({
title: '警告',
text: '警告内容'
}, options);
var $alert = $('.weui_dialog_alert');
$alert.find('.weui_dialog_title').text(options.title);
$alert.find('.weui_dialog_bd').text(options.text);
$alert.on('touchend click', '.weui_btn_dialog', function() {
$alert.hide();
});
$alert.show();
};
function removeImg(obj){
$(obj).remove();
}
$(function() {
// 允许上传的图片类型
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
// 1024KB,也就是 1MB
var maxSize = 1024 * 1024;
// 图片最大宽度
var maxWidth = 300;
// 最大上传图片数量
var maxCount = 6;
$('.js_file').on('change', function(event) {
var files = event.target.files;
// 如果没有选中文件,直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.weui.alert({
text: '该类型不允许上传'
});
continue;
}
if (file.size > maxSize) {
$.weui.alert({
text: '图片太大,不允许上传'
});
continue;
}
if ($('.weui_uploader_file').length >= maxCount) {
$.weui.alert({
text: '最多只能上传' + maxCount + '张图片'
});
return;
}
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
// 不要超出最大宽度
var w = Math.min(maxWidth, img.width);
// 高度按比例计算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL('image/png');
canvas.toBlob(function (blob) {
//alert("blob is created");
// // 图片ajax上传
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("fileData", blob);//fileData为自定义
fd.append("fileName", "haha.jpg");
// 开始上传
xhr.open("POST", 'http://127.0.0.1:8080/uploadimg', true);
xhr.send(fd);
});
// 插入到预览区
var $preview = $('<li onclick="removeImg(this)" class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
$('.weui_uploader_files').append($preview);
var num = $('.weui_uploader_file').length;
$('.js_counter').text(num + '/' + maxCount);
// 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
var progress = 0;
function uploading() {
$preview.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 2);
} else {
// 如果是失败,塞一个失败图标
//$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
$preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();
}
}
setTimeout(uploading, 2);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
});
</script>
</body>
</html>
public void uploadimg(){
header("Access-Control-Allow-Origin", "*");
output("haha is "+param("fileData"));
String realpath = application.getRealPath(param("fileData"));
File f = new File(realpath);
f.renameTo(new File(realpath.replace("null", "jpg")));
}