本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！javascript图片上传预览的实现方法（附源码）
收藏 本篇文章给大家带来的内容是关于php协成实现的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。
废话不多说，先上图。
待上传图像
点击蓝色框内，pc可以选择文件，移动端选择拍照或选择图片进行上传。
HTML部分
<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>
.default-box这层就是加号图像
up-img是转码后显示图像的地方。
下面input是选择图像的地方。
css
.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: -.64rem; margin-top: -.64rem; 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; }
内部就是定位了。
页面js
document.querySelector("#addImg").addEventListener("change",function () { changeImg({ id:"addImg", //input的Id 必须 imgBox:'upImg', //显示位置Id 必须 limitType:['jpg','png','jpeg'], //支持的类型 必须 limitSize:819200 //图片超过多大开始进行压缩 可不传 }); });
我们监听input的change时间，然后传入参数dShowImg64.js代码
//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); // 不压缩，直接转base64 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 (base64Img) { //调用压缩函数 dom.style.backgroundImage = "url("+base64Img+")"; //如果要上传的话，在这里调用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); //转base64 var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); //回调函数传入base64的值 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; }
首先获取各种属性如类型、大小
判断图片是否小于限制大小、小于的话直接转base64，大于的话 利用canvas 进行缩小完成压缩后转base64 然后将得到的值设置为背景图。然后隐藏add的样式。
最后的预览图像
git地址：https://github.com/Zhoujiando…
以后会加入更多的小插件。 最后祝大家身体健康，谢谢。
