图片上传预览效果代码实例
分类:实例代码
分享一段代码实例,它实现了上传图片预览效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #click { width: 200px; height: 200px; border: 1px solid #000; } </style> </head> <body> <input type="file" id="photo"> <div id="click"></div> <script> document.getElementById('photo').addEventListener('change', function(e) { var files = this.files; var img = new Image(); var reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onload = function(e) { var mb = (e.total / 1024) / 1024; if (mb >= 2) { alert('文件大小大于2M'); return; } img.src = this.result; img.style.width = "80%"; document.getElementById('click').style.width = "200px"; document.getElementById('click').style.height = "200px"; document.getElementById('click').innerHTML = ''; document.getElementById('click').appendChild(img); } }); </script> </body> </html>
图片上传预览效果代码实例,这样的场景在实际项目中还是用的比较多的,关于图片上传预览效果代码实例就介绍到这了。
图片上传预览效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。