上传时预览图片,纯前端
Html:
<div id="imgPreview"> <div id="prompt3"> <span id="imgSpan"> 点击上传 <br /> <i class="aui-iconfont aui-icon-plus"></i> <!--AUI框架中的图标--> </span> <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG"> <!--当vaule值改变时执行changepic函数,规定上传的文件只能是图片--> </div> <img src="#" id="img3" /> </div>
JS:
function changepic() { $("#prompt3").css("display", "none"); var reads = new FileReader(); f = document.getElementById('file').files[0]; reads.readAsDataURL(f); reads.onload = function(e) { document.getElementById('img3').src = this.result; $("#img3").css("display", "block"); }; }
转自: https://blog.csdn.net/qq_41362025/article/details/81427819