主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
Javascriptpu实现上传图片显示缩略图
2020-02-08
网页编程网
网页编程网
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Js实现input上传图片时显示缩略图</title> </head> <input type="file" id="imgFile" /><br /> <img src="" height="50" /> <body> </body> </html> <script> /** 1.获取input DOM里面的files[0] 和 imgDOM 2.new FileReader对象 3.判断flie是否存在，存在就阅读readAsDataURL 4.img路径赋值上reader.result */ document.getElementById('imgFile').onchange = function(){ var preview = document.querySelector("img"); var file = document.querySelector("input[type=file]").files[0]; var reader = new FileReader(); if(file){ reader.readAsDataURL(file); }else{ preview.src = ''; } reader.onloadend = function(){ preview.src = reader.result; } } </script>
只适用于chrome、Firefox和IE10以上。
阅读原文
阅读
3339
123
显示电脑版