H5图片预览、压缩、上传
目标实现：
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');
});
}
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端图片预览压缩上传</title>
<style>
.clear::after {
content: '';
clear: both;
display: block;
}
.fl {
float: left;
}
.list-img li {
position: relative;
margin-right: 10px;
list-style: none;
}
.list-img img {
display: inline-block;
width: 50px;
height:50px;
}
.list-img input {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 50px;
height:50px;
opacity: 0;
}
.list-img i {
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
background: url(../images/icon_del.png) no-repeat center;
background-size: 100%;
}
.list-img .num {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="list-img">
<ul id="preview" class="clear">
<li class="fl">
<img src="/images/icon_upload.png">
<input id="fileImage" type="file" name="file[]" multiple />
<div class="num">0/4</div>
</li>
</ul>
</div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var pageCtrl = {
imgId : 0, //图片id标志, 方便删除预览图片
maxNum : 4, //最多上传图片张数 /* 选择图片 */
_choosePic : function() {
var _self = this;
$('#fileImage').change(function() {
var files = this.files,
len = $('#preview').find('.pic').length;
if (len + files.length > _self.maxNum) {
_self._showTip('最多只能上传' + _self.maxNum + '张图片哦~');
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) {
_self._showTip('图片大小过大，应小于3M');
} else {
_self._showPic(file); //图片预览
}
} else {
_self._showTip('文件"' + file.name + '"不是图片类型')
break;
}
}
});
}, /* 渲染图片 */
_showPic : function(file) {
var _self = this,
html = '',
$wap = $('#preview'),
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var image_base64 = this.result,
imgId = _self.imgId; 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 + '/' + _self.maxNum); //图片压缩上传，大于1.2M压缩图片
if (file.size / 1024 > 1024 * 1.2) {
_self._dealImage(image_base64, {
quality: 0.5
}, function(base64Codes) {
var bl = _self._processData(base64Codes, file.type);
_self._uploadPic(bl, imgId);
});
} else {
_self._uploadPic(file, imgId);
}
}
}, /**
* 图片压缩（利用canvas）
* @param path 图片路径
* @param obj 压缩配置width,height,quality，不传则按比例压缩
* @param callback 回调函数
*/
_dealImage : function(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的图片url数据转换为Blob */
_processData : function(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;
}, /* 上传图片 */
_uploadPic : function(file, id) {
var _self = this,
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 {
_self._showTip('文件上传失败！');
}
}
});
}, /* 删除图片 */
_delPic : function() {
var _self = this,
$wap = $('#preview');
$wap.on('click', '.del-img', function() {
//TODO:从数据库删除图片
$(this).parent().remove();
$('#fileImage').next().text($wap.find('.pic').length + '/' + _self.maxNum);
});
}, _showTip : function(str) {
//TODO信息提示
console.log(str);
}, init: function() {
this._choosePic();
this._delPic();
}
}; $(function() {
pageCtrl.init();
});
</script>
</body>
</html> 完整代码
完整代码
参考文章：
https://www.cnblogs.com/007sx/p/7583202.html
H5图片预览、压缩、上传的更多相关文章
- jquery+html5+canvas实现图片 预览 压缩 上传
javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- vue组件利用formdata图片预览以及上传《转载》
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- vue组件利用formdata图片预览以及上传
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- 用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- 使用HttpClient进行远程接口测试
前两天在工作中,项目组长给我了一个远程接口让我给测一下,因为是http协议,所以我首先想到了用httpClient工具类来测试,网上一查,找到了好多示例代码,随便复制了一个demo进行了简单的修改,结 ...
- c++多态特性总结
将父类比喻为电脑的外设接口,子类比喻为外设,现在我有移动硬盘.U盘以及MP3,它们3个都是可以作为存储但是也各不相同.如果我在写驱动的时候,我用个父类表示外设接口,然后在子类中重写父类那个读取设备的虚 ...
- python selenium webdriver处理浏览器滚动条
用键盘右下角的UP,DOWN按键来处理页面滚动条 这种方法很灵活用起来很方便!!!! from selenium import webdriver import time from selenium. ...
- Leetcode: Longest Consecutive Sequence && Summary: Iterator用法以及ConcurrentModificationException错误说明
Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...
- vue框架(二)_vue环境搭建及创建项目
1.node.js:概念介绍及安装 node.js:是一个基于chrome浏览器的v8引擎,可以运行javascript的环境(平台) 特性:异步IO模型 npm:是一个包管理器(工具),可以按装依赖 ...
- Redis缓存穿透问题及解决方案
上周在工作中遇到了一个问题场景,即查询商品的配件信息时(商品:配件为1:N的关系),如若商品并未配置配件信息,则查数据库为空,且不会加入缓存,这就会导致,下次在查询同样商品的配件时,由于缓存未命中,则 ...
- MFC六大核心机制之四：永久保存（串行化）
永久保存(串行化)是MFC的重要内容,可以用一句简明直白的话来形容其重要性:弄懂它以后,你就越来越像个程序员了! 如果我们的程序不需要永久保存,那几乎可以肯定是一个小玩儿.那怕我们的记事本.画图等小程 ...
- 线段树(I tree)
Codeforces Round #254 (Div. 2)E题这题说的是给了一个一段连续的区间每个区间有一种颜色然后一个彩笔从L画到R每个区间的颜色都发生了 改变然后 在L和R这部分区间里所用的颜色 ...
- Intro to Python for Data Science Learning 2 - List
List from:https://campus.datacamp.com/courses/intro-to-python-for-data-science/chapter-2-python-list ...
- C/C++之单例模式实现
/*** * 保证一个类仅有一个实例,并提供一个访问它的全局访问点 */ #include <iostream> #include <string> using namespa ...