上传图片并压缩
之前帮后端写了一个上传图片的方法,一直在本地放着,现在放出来给各位参考!
话不多说直接上代码!!
首先是html代码,可以使用循环进行多张上传,自己作一下处理就行。
<div class="fileinp"> <div class="upload">车左前方45度图片</div> <div class="uld"> <div class="hide"> <input type="file" id="file-up" onchange="file(event)" class="file-up" title=""> <img class="instruction" id="instruction" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2796968061,631869099&fm=26&gp=0.jpg" alt=""> </div> <img class="instruction-pic" id="instruction-pic" src="" alt=""> <img class="del" id="del" src="./img/1572853206(1).jpg" alt=""> </div> </div>
下面是js代码:
function file (e) { var files = e.target.files[0]; if (files && files.size) { var size = files.size / 1000 / 1024; console.log(size); // 如果图片大于2M则重新上传,这里e.target.files[0].size单位是b // if (size > 2) { // alert('图片太大,请重新上传'); // return; // } // 如果上传的不是图片格式,提示请选择图片 var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; if (!rFilter.test(files.type)) { alert('请选择图片格式!'); return; } var reader = new FileReader(); reader.readAsDataURL(files); reader.onloadstart = function () { console.log('图片正在上传处理......'); }; //操作完成 reader.onload = function(e) { suofang(reader.result, 3, returnBase) function returnBase (blob, Base) { console.log(Base, blob); $('.hide').hide() $('.del').show() $('.instruction-pic').show() // file 对象的属性 $('.instruction-pic').attr('src', Base); document.getElementById('file-up').value = null; } }; } } function suofang (base64, bili, callback) { console.log("执行缩放程序,bili=" + bili); //处理缩放,转格式 var _img = new Image(); _img.src = base64; _img.onload = function() { var _canvas = document.createElement("canvas"); var w = this.width / bili; var h = this.height / bili; _canvas.setAttribute("width", w); _canvas.setAttribute("height", h); _canvas.getContext("2d").drawImage(this, 0, 0, w, h); var base64 = _canvas.toDataURL("image/jpeg"); _canvas.toBlob(function(blob) { console.log(blob.size); if(blob.size > 1024*1024){ suofang(base64, bili, callback); }else{ callback(blob, base64); } }, "image/jpeg"); } } $('#del').on('click', function(e) { console.log(666); $('.hide').show(); $('.instruction-pic').attr('src', ''); $('.instruction-pic').hide(); $('.del').hide() })
支持删除,重新上传,选择完图片会自动压缩,压缩的原理采用的是缩放。
下面是html代码:
* { margin: 0; padding: 0; outline: none; } .fileinp { width: 100%; text-align: center; } .uld { width: 100%; position: relative; height: 300px; } .file-up { position: absolute; top: 0; left: 0; width: 100%; height: 300px; cursor: pointer; opacity: 0; } img { width: 300px; height: 300px; } .instruction-pic { border: 1px solid #000; display: none; } .del { position: absolute; top: 0px; z-index: 99; left: 60%; display: none; width: 30px; height: 30px; }
代码中采用了jq的选择方法,可以引用jquery,也可以改成原生方法,谢谢!!!