示例图：
源码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>生成图片预览</title><style type="text/css">#images{padding: 10px;}</style></head><body><div><label><input type="file" id="file"></label></div><hr><div id="images"></div><script type="text/javascript">var imagesEl = document.querySelector("#images"),file = document.querySelector("#file");/*已选择的文件 Base64数据 */var imageBase64="";function readFile(event) {/*获取事件源对象的文件集数组中的第一个*/var selectFile=event.target.files[0];/*判断选择的文件类型是否为图片*/if(selectFile.type && !(/image/i.test(selectFile.type))){//alert("请选择图片文件");return;}/*创建 FileReader 对象*/var fileRead=new FileReader();fileRead.readAsDataURL(selectFile);fileRead.onloadend=function () {/*追加图片元素*/imagesEl.innerHTML="<img src='"+this.result+"' />";/*将已选择的文件 base64 数据保存提交数据*/imageBase64=this.result;};}file.addEventListener("change",function(e){readFile(e || window.event);},false);</script></body></html>
作者：黄河爱浪QQ：1846492969，邮箱：helang.love@
公众号：
web-7258，，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
