目标实现：
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 + ‘" >‘ + ???????????????????‘<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 ????????????z-index: 10; 29 ????????????width: 50px; 30 ????????????height:50px; 31 ????????????opacity: 0; ????32 ????????} 33 ????????.list-img i { 34 ????????????position: absolute; 35 ????????????top: 0; 36 ????????????right: 0; 37 ????????????width: 15px; 38 ????????????height: 15px; 39 ????????????background: url(../images/icon_del.png) no-repeat center; 40 ????????????background-size: 100%; 41 ????????} 42 ????????.list-img .num { 43 ????????????position: absolute; 44 ????????????left: 0; 45 ????????????bottom: 0; 46 ????????????width: 100%; 47 ????????????text-align: center; 48 ????????????color: #999; 49 ????????????font-size: 12px; ????50 ????????} 51 ????</style> 52 </head> 53 <body> 54 ????<div class="list-img"> 55 ????????<ul id="preview" class="clear"> 56 ????????????<li class="fl"> 57 ????????????????<img src="/images/icon_upload.png"> 58 ????????????????<input id="fileImage" type="file" name="file[]" multiple /> 59 ????????????????<div class="num">0/4</div> 60 ????????????</li> 61 ????????</ul> 62 ????</div> ????63 ?64 ????<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 65 ????<script> 66 ????????var pageCtrl = { 67 ????????????imgId : 0, //图片id标志, 方便删除预览图片 68 ????????????maxNum : 4, //最多上传图片张数 69 ?70 ????????????/* 选择图片 */ 71 ????????????_choosePic : function() { 72 ????????????????var _self = this; 73 ????????????????$(‘#fileImage‘).change(function() { 74 ????????????????????var files = this.files, 75 ????????????????????????len = $(‘#preview‘).find(‘.pic‘).length; 76 ????????????????????if (len + files.length > _self.maxNum) { 77 ????????????????????????_self._showTip(‘最多只能上传‘ + _self.maxNum + ‘张图片哦~‘); 78 ????????????????????????return; 79 ????????????????????} 80 ????????????????????for (var i = 0; i < files.length; i++) { 81 ????????????????????????var file = files[i]; 82 ????????????????????????if (file.type.indexOf("image") == 0) { 83 ????????????????????????????if (file.size >= 1024 * 1024 * 3) { 84 ????????????????????????????????_self._showTip(‘图片大小过大，应小于3M‘); 85 ????????????????????????????} else { 86 ????????????????????????????????_self._showPic(file); //图片预览 87 ????????????????????????????} 88 ????????????????????????} else { 89 ????????????????????????????_self._showTip(‘文件"‘ + file.name + ‘"不是图片类型‘) 90 ????????????????????????????break; 91 ????????????????????????} 92 ????????????????????} 93 ????????????????}); 94 ????????????}, 95 ?96 ????????????/* 渲染图片 */ 97 ????????????_showPic : function(file) { 98 ????????????????var _self = this, 99 ????????????????????html = ‘‘,100 ????????????????????$wap = $(‘#preview‘),101 ????????????????????reader = new FileReader();102 ????????????????reader.readAsDataURL(file);103 ????????????????reader.onload = function(e) {104 ????????????????????var image_base64 = this.result,105 ????????????????????imgId = _self.imgId;106 107 ????????????????????html = ‘<li class="fl pic" id="imgItem_‘ + imgId + ‘">‘ +108 ????????????????????????????????‘<img src="‘ + image_base64 + ‘" >‘ +109 ????????????????????????????????‘<i class="del-img"></i>‘ +110 ????????????????????????????‘</li>‘;111 ????????????????????imgId++; ???????112 ????????????????????$wap.append(html);113 ????????????????????$(‘#fileImage‘).next().text($wap.find(‘.pic‘).length + ‘/‘ + _self.maxNum); ???114 115 ????????????????????//图片压缩上传，大于1.2M压缩图片116 ????????????????????if (file.size / 1024 > 1024 * 1.2) {117 ????????????????????????_self._dealImage(image_base64, {118 ????????????????????????????quality: 0.5119 ????????????????????????}, function(base64Codes) {120 ????????????????????????????var bl = _self._processData(base64Codes, file.type);121 ????????????????????????????_self._uploadPic(bl, imgId);122 ????????????????????????});123 ????????????????????} else {124 ????????????????????????_self._uploadPic(file, imgId);125 ????????????????????}126 ????????????????}127 ????????????},128 129 130 ????????????/**131 ?????????????* 图片压缩（利用canvas）132 ?????????????* @param ?path ????图片路径133 ?????????????* @param ?obj ?????压缩配置width,height,quality，不传则按比例压缩134 ?????????????* @param ?callback ?回调函数135 ?????????????*/136 ????????????_dealImage : function(path, obj, callback) {137 ????????????????var img = new Image();138 ????????????????img.src = path;139 ????????????????img.onload = function() {140 ????????????????????var that = this;141 ????????????????????// 默认按比例压缩142 ????????????????????var w = that.width,143 ????????????????????????h = that.height,144 ????????????????????????scale = w / h;145 ????????????????????w = obj.width || w;146 ????????????????????h = obj.height || (w / scale);147 148 ????????????????????//生成canvas149 ????????????????????var canvas = document.createElement(‘canvas‘),150 ????????????????????ctx = canvas.getContext(‘2d‘);151 ????????????????????canvas.width = w;152 ????????????????????canvas.height = h;153 ????????????????????ctx.drawImage(that, 0, 0, w, h);154 155 ????????????????????// 默认图片质量为0.7156 ????????????????????var quality = 0.7;157 ????????????????????if (obj.quality && obj.quality <= 1 && obj.quality > 0) {158 ????????????????????????quality = obj.quality;159 ????????????????????}160 161 ????????????????????// 回调函数返回base64的值162 ????????????????????var base64 = canvas.toDataURL(‘image/jpeg‘, quality);163 ????????????????????callback(base64);164 ????????????????}165 ????????????},166 167 ????????????/* 将以base64的图片url数据转换为Blob */168 ????????????_processData : function(dataUrl, type) {169 ????????????????var binaryString = window.atob(dataUrl.split(‘,‘)[1]),170 ????????????????arrayBuffer = new ArrayBuffer(binaryString.length),171 ????????????????intArray = new Uint8Array(arrayBuffer);172 ????????????????for (var i = 0, j = binaryString.length; i < j; i++) {173 ????????????????????intArray[i] = binaryString.charCodeAt(i);174 ????????????????}175 176 ????????????????var data = [intArray], blob;177 178 ????????????????try {179 ????????????????????blob = new Blob(data);180 ????????????????} catch (e) {181 ????????????????????window.BlobBuilder = window.BlobBuilder ||182 ????????????????????????window.WebKitBlobBuilder ||183 ????????????????????????window.MozBlobBuilder ||184 ????????????????????????window.MSBlobBuilder;185 ????????????????????if (e.name === ‘TypeError‘ && window.BlobBuilder) {186 ????????????????????????var builder = new BlobBuilder();187 ????????????????????????builder.append(arrayBuffer);188 ????????????????????????blob = builder.getBlob(type);189 ????????????????????} else {190 ????????????????????????_showTip(‘版本过低，不支持图片压缩上传‘);191 ????????????????????}192 ????????????????}193 ????????????????return blob;194 ????????????},195 196 ????????????/* 上传图片 */197 ????????????_uploadPic : function(file, id) {198 ????????????????var _self = this,199 ????????????????formData = new FormData();200 ????????????????formData.append(‘img‘, file);201 ????????????????$.ajax({202 ????????????????????url: ‘/upload‘,203 ????????????????????type: ‘post‘,204 ????????????????????dataType: ‘json‘,205 ????????????????????data: formData,206 ????????????????????contentType: false,207 ????????????????????processData: false, ??????????208 ????????????????????success: function(res){209 ????????????????????????if(res.respCode == 1000) {210 ????????????????????????????$(‘#imgItem_‘ + id).find(‘.del-img‘).attr(‘data-src‘, res.data.src); ???????????????????211 ????????????????????????}else {212 ????????????????????????????_self._showTip(‘文件上传失败！‘); 213 ????????????????????????}214 ????????????????????}215 ????????????????}); ?216 ????????????},217 218 ????????????/* 删除图片 */219 ????????????_delPic : function() {220 ????????????????var _self = this,221 ????????????????$wap = $(‘#preview‘);222 ????????????????$wap.on(‘click‘, ‘.del-img‘, function() {223 ????????????????????//TODO:从数据库删除图片224 ????????????????????$(this).parent().remove();225 ????????????????????$(‘#fileImage‘).next().text($wap.find(‘.pic‘).length + ‘/‘ + _self.maxNum); ???226 ????????????????});227 ????????????},228 229 ????????????_showTip : function(str) {230 ????????????????//TODO信息提示231 ????????????????console.log(str);232 ????????????},233 234 ????????????init: function() {235 ????????????????this._choosePic();236 ????????????????this._delPic(); ???????237 ????????????}238 ????????};239 240 ????????$(function() {241 ????????????pageCtrl.init();242 ????????});243 ????</script>244 </body>245 </html>参考文章：
https://www.cnblogs.com/007sx/p/7583202.html
H5图片预览、压缩、上传
原文地址：https://www.cnblogs.com/ww03/p/9507039.html