H5图片预览、压缩、上传
From: https://www.cnblogs.com/ww03/p/9507039.html
目标实现：
1、选择图片， 前端预览效果
2、图片大于1.2M的时候， 对图片进行压缩
3、以表单的形式上传图片
4、图片删除
预览效果图：
代码说明：
1、input:file选择图片
<!-- html部分 -->
<ul id="preview" class="clear">
<li class="fl">
<img src="/images/audition/icon_upload.png">
<input id="fileImage" type="file" name="file[]" multiple />
<div class="num">0/4</div>
</li>
</ul>
var imgId = 0; //图片id标志, 方便删除预览图片
/* 选择图片 */
function choosePic() {
$('#fileImage').change(function() {
var files = this.files,
len = $('#preview').find('.pic').length;
if (len + files.length > 4) {
showTip('最多只能上传4张图片哦~');
return;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.indexOf("image") == 0) {
if (file.size >= 1024 * 1024 * 3) {
showTip('图片大小过大，应小于3M');
} else {
showPic(file); //图片预览
}
} else {
showTip('文件"' + file.name + '"不是图片类型')
break;
}
}
});
}
2、图片预览（base64）
/* 渲染图片 */
function showPic(file) {
var html = '',
$wap = $('#preview'),
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var image_base64 = this.result;
html = '<li class="fl pic" id="imgItem_' + imgId + '">' +
'<img src="' + image_base64 + '" alt="">' +
'<i class="del-img"></i>' +
'</li>';
imgId++;
$wap.append(html);
$('#fileImage').next().text($wap.find('.pic').length + '/4');
//图片压缩上传，大于1.2M压缩图片
if (file.size / 1024 > 1024 * 1.2) {
dealImage(image_base64, {
quality: 0.5
}, function(base64Codes) {
var bl = processData(base64Codes, file.type);
uploadPic(bl, imgId);
});
} else {
uploadPic(file, imgId);
}
}
}
3、图片压缩
/**
* 图片压缩（利用canvas）
* @param path 图片路径
* @param obj 压缩配置width,height,quality，不传则按比例压缩
* @param callback 回调函数
*/
function dealImage(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
//生成canvas
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
ctx.drawImage(that, 0, 0, w, h);
// 默认图片质量为0.7
var quality = 0.7;
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// 回调函数返回base64的值
var base64 = canvas.toDataURL('image/jpeg', quality);
callback(base64);
}
}
压缩后的文件是base64格式， 我们希望用file图片的形式上传
/* 将以base64的图片url数据转换为Blob */
function processData(dataUrl, type) {
var binaryString = window.atob(dataUrl.split(',')[1]),
arrayBuffer = new ArrayBuffer(binaryString.length),
intArray = new Uint8Array(arrayBuffer);
for (var i = 0, j = binaryString.length; i < j; i++) {
intArray[i] = binaryString.charCodeAt(i);
}
var data = [intArray], blob;
try {
blob = new Blob(data);
} catch (e) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name === 'TypeError' && window.BlobBuilder) {
var builder = new BlobBuilder();
builder.append(arrayBuffer);
blob = builder.getBlob(type);
} else {
showTip('版本过低，不支持图片压缩上传');
}
}
return blob;
}
4、图片上传
/* 上传图片 */
function uploadPic(file, id) {
var formData = new FormData();
formData.append('img', file);
$.ajax({
url: '/upload',
type: 'post',
dataType: 'json',
data: formData,
contentType: false,
processData: false,
success: function(res){
if(res.respCode == 1000) {
$('#imgItem_' + id).find('.del-img').attr('data-src', res.data.src);
}else {
showTip('文件上传失败！');
}
}
});
}
5、其他
function showTip(str) {
//TODO:信息提示
console.log(str);
}
/* 删除图片 */
function delPic() {
var $wap = $('#preview');
$wap.on('click', '.del-img', function() {
//TODO:从数据库删除图片
$(this).parent().remove();
$('#fileImage').next().text($wap.find('.pic').length + '/4');
});
}
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>前端图片预览压缩上传</title>
6 <style>
7 .clear::after {
8 content: '';
9 clear: both;
10 display: block;
11 }
12 .fl {
13 float: left;
14 }
15 .list-img li {
16 position: relative;
17 margin-right: 10px;
18 list-style: none;
19 }
20 .list-img img {
21 display: inline-block;
22 width: 50px;
23 height:50px;
24 }
25 .list-img input {
26 position: absolute;
27 top: 0;
28 left: 0;
29 z-index: 10;
30 width: 50px;
31 height:50px;
32 opacity: 0;
33 }
34 .list-img i {
35 position: absolute;
36 top: 0;
37 right: 0;
38 width: 15px;
39 height: 15px;
40 background: url(../images/icon_del.png) no-repeat center;
41 background-size: 100%;
42 }
43 .list-img .num {
44 position: absolute;
45 left: 0;
46 bottom: 0;
47 width: 100%;
48 text-align: center;
49 color: #999;
50 font-size: 12px;
51 }
52 </style>
53 </head>
54 <body>
55 <div class="list-img">
56 <ul id="preview" class="clear">