先看效果圖?

一、直接展示上傳的圖片

CSS代碼：

#previewImg {position: relative;width: 80px;height: 80px;line-height: 80px;border: 1px dashed rgb(0, 0, 0, .5);text-align: center;cursor: pointer; }#previewImg:hover {border: 1px dashed rgb(0, 0, 0); }#previewImg p {width: 100%;margin: 0; }#fileInp {position: absolute;top: 0;left: 0;z-index: 5;width: 100%;height: 100%;cursor: pointer;opacity: 0; }#fileImg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; }

HTML代碼：

<div id="previewImg"><input type="file" id="fileInp"><img src="" alt="111" id="fileImg"><p>上傳圖片</p> </div>

JS代碼：

let inp = document.getElementById('fileInp'); let fileImg = document.getElementById('fileImg'); inp.onchange = function() {let inpObj = inp.files[0]; // 拿到上傳文件的屬性// inpObj.size 上傳文件的大小（字節(jié)數(shù)）// inpObj.type 上傳文件的類型 例如：image/pngif (inpObj.type !== "image/png") {alert('上傳的不是png/jpg類型的圖片')} else if (inpObj.size / 1024 / 1024 > 2) {alert('上傳的圖片超過2MB')} else {let windowURL = window.URL || window.webkitURL;let img = document.getElementById('preview');if (inp && inpObj) {// createObjectURL(inpObj) 創(chuàng)建一個文件的臨時地址let dataURL = windowURL.createObjectURL(inpObj);fileImg.setAttribute('src', dataURL);fileImg.style.opacity = 1}} }

二、將圖片轉(zhuǎn)換成base64，再上傳

CSS、HTML代碼同上

JS代碼

let inp = document.getElementById('fileInp'); let fileImg = document.getElementById('fileImg'); inp.onchange = function() {let inpObj = inp.files[0]; // 拿到上傳文件的屬性// inpObj.size 上傳文件的大小（字節(jié)數(shù)）// inpObj.type 上傳文件的類型 例如：image/pngif (inpObj.type !== "image/png") {alert('上傳的不是png/jpg類型的圖片')} else if (inpObj.size / 1024 / 1024 > 2) {alert('上傳的圖片超過2MB')} else {let windowURL = window.URL || window.webkitURL;let img = document.getElementById('preview');if (inp && inpObj) {// createObjectURL(inpObj) 創(chuàng)建一個文件的臨時地址let dataURL = windowURL.createObjectURL(inpObj);toBase64(dataURL);}} } function toBase64(imgSrc) {var canvas = document.createElement("canvas");canvas.width = 320;canvas.height = 320;let context = canvas.getContext("2d");context.rect(0, 0, canvas.width, canvas.height);context.fillStyle = "#fff";context.fill();let myImage = new Image();myImage.src = imgSrc; //背景圖片 你自己本地的圖片或者在線圖片myImage.crossOrigin = 'Anonymous';let base64 = null;myImage.onload = () => {context.drawImage(myImage, 0, 0, 320, 320);base64 = canvas.toDataURL("image/png");// 等圖片轉(zhuǎn)換成base64之后 更新圖片fileImg.setAttribute('src', base64);fileImg.style.opacity = 1} }

總結(jié)

以上是生活随笔為你收集整理的原生JS实现上传图片预览效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。