html上传图片代码10行JavaScript代码完成图片的上传预览

下面进入主题，用原生JS给撸个图片上传，预览的小示例，希望对大家有所帮助。

示例

function fChange() { let file = document.getElementById('file'); // 输出已经选择图片名字 console.log(file.value); // 输出已经选择的图片工具 console.log(file.files[0]); } ... <input type=\公众file\公众 id=\"大众file\"大众 onchange=\"大众fChange()\"大众>

10行JavaScript代码完成图片的上传预览

我们怎么把图片工具渲染到页面了？达到可以预览的目的？

html上传图片代码10行JavaScript代码完成图片的上传预览 Ruby

// file 转 blob工具 let bold = window.URL.createObjectURL(file.files[0]); console.log('bold==>'+bold); let boldImg = document.getElementById('bold'); boldImg.src = bold; // file 转 base64 let base64Img = document.getElementById('base64'); var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function (e) { console.log('base64==>'+this.result); base64Img.src = this.result; }

10行JavaScript代码完成图片的上传预览

这样看blob工具和base64都可以预览图片，但是blob工具仅仅是当次缓存，如果刷新，你重新把之前转的字符串放到src是不可以预览的，当时base64是可以的。
以是存库的时候不仅可以图片路径，还可以直接存base64（base64很占用数据库空间，文件越大，base64字符串越大）

优化

下面我们对上面示例做优化，可以上传多张图片并预览，美化界面。

10行JavaScript代码完成图片的上传预览

css样式

#add-pic{ width: 100px; height: 100px; background: url('./add-pic.png') } #add-pic input{ width: 100%; height: 100%; display: none; } #img-pre:after{ display: block; content: ''; clear: both; } #img-pre img{ float: left; width: 100px; height: 100px; margin-right: 10px; }

javascript

let addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file'); // 监听图片点击，从而触发input file的点击事宜 addPic.addEventListener('click', function(){ upFile.click(); }) function fChange() { let file = document.getElementById('up-file'); let imgPre = document.getElementById('img-pre'); // file 转 blob工具 let bold = window.URL.createObjectURL(file.files[0]); // 创建img元素，并添加到img-pre元素里 var img = document.createElement(\"大众img\"大众); img.setAttribute(\公众src\"大众, bold); imgPre.appendChild(img); }

紧张是通过css隐蔽掉input file选择文件按钮，然后用+号图片点击事宜来触发input file的点击事宜，达到能选择图片的目的。

公告

喜好

源码地址请点击下方“理解更多”