javascript图片上传预览的实现方法（附源码）

<div class="img-box">
 <div class="card-box">
 <div class="default-box" >
 <img class="default-img" src="./cardFactory.png" alt="">
 <div class="default-title">请点击</div>
 <img class="add-img" src="./add.png" alt="">
 </div>
 <div class="up-img" id="upImg"></div>
 <input type="file" id="addImg" class="upImg-btn">
 </div>
</div>

 .img-box {
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .card-box {
 width: 7.5rem;
 height: 4rem;
 border: solid .04rem #23a7fe;
 border-radius: 4px;
 box-sizing: border-box;
 position: relative;
 }
 .upImg-btn {
 width: 100%;
 height: 100%;
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 }
 .up-img {
 width: 5.58rem;
 height: 3.12rem;
 margin: .2rem .6rem;
 position: absolute;
 top: .2rem;
 left: 0;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover
 }
 .default-box {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 }
 .add-img {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -.rem;
 margin-top: -.rem;
 width: 1.28rem;
 height: 1.28rem;
 }
 .default-img {
 position: absolute;
 padding: 0 1.1rem;
 bottom: .68rem;
 box-sizing: border-box;
 width: 100%;
 opacity: .5;
 }
 .default-title {
 position: absolute;
 width: 100%;
 bottom: .12rem;
 text-align: center;
 color: #23a7fe;
 font-size: .32rem;
 }

 document.querySelector("#addImg").addEventListener("change",function () {
 changeImg({
 id:"addImg", //input的Id 必须
 imgBox:'upImg', //显示位置Id 必须
 limitType:['jpg','png','jpeg'], //支持的类型 必须
 limitSize:819200 //图片超过多大开始进行压缩 可不传
 });
 });

 //id,limitType,limitSize
 function changeImg(obj = {}) { 
 if(!obj.id) return;
 if(!obj.limitType)return;
 var dom = document.querySelector("#"+obj.imgBox);
 var files = document.querySelector("#"+obj.id).files[0];
 var reader = new FileReader();
 var type = files.type && files.type.split('/')[1]; //文件的类型，判断是否是图片
 var size = files.size; //文件的大小，判断图片的大小
 if (obj.limitType.indexOf(type) == -1) {
 alert('不符合上传要求');
 return;
 }
 //判断是否传入大小。压不压缩。
 var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
 if (size < limitSize) {
 reader.readAsDataURL(files); // 不压缩，直接转base
 reader.onloadend = function () {
 dom.style.backgroundImage = "url("+this.result+")";
 //如果要上传的话，在这里调用ajax
 document.querySelector(".default-box").style.display = "none";
 }
 } else { //压缩
 var imageUrl = this.getObjectURL(files); //创造url
 this.convertImg(imageUrl, function (baseImg) { //调用压缩函数
 dom.style.backgroundImage = "url("+baseImg+")";
 //如果要上传的话，在这里调用ajax
 document.querySelector(".default-box").style.display = "none";
 }, type)
 }
 }
 function convertImg(url, callback, outputFormat) {
 var canvas = document.createElement('CANVAS'); //绘制canvas
 var ctx = canvas.getContext('2d');
 var img = new Image; //初始化图片
 img.crossOrigin = 'Anonymous';
 img.onload = function () {
 var width = img.width;
 var height = img.height;
 // 按比例压缩2倍 //设置压缩比例，最后的值越大压缩越高
 var rate = (width < height ? width / height : height / width) / 2;
 canvas.width = width * rate;
 canvas.height = height * rate; //绘制新图
 ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate); //转base
 var dataURL = canvas.toDataURL(outputFormat || 'image/png');
 callback.call(this, dataURL); //回调函数传入base的值
 canvas = null;
 };
 img.src = url;
 }
 function getObjectURL(file) { //创造指向该图的URL
 var url = null;
 if (window.createObjectURL != undefined) { //大部分执行这个
 url = window.createObjectURL(file);
 } else if (window.URL != undefined) { // 兼容
 url = window.URL.createObjectURL(file);
 } else if (window.webkitURL != undefined) { // 兼容
 url = window.webkitURL.createObjectURL(file);
 }
 return url;
 }