js 选择本地图片并显示
选择本地图片并将所选图片显示
<html> <body> <img id="image" src=""/> <br/> <input type="file" onchange="selectImage(this);"/> <br/> <script> var image = ''; function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('image').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } </script> </body> </html>
原始组件样式如下
美化方法之一,将选择图片的input的css设置为如下,浮动定位且宽高占比100%,覆盖在需要点击的地方,例如默认图片上。
input { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }