上传文件及时预览demo

xiaoxiao2021-12-02 24

<!doctype html> <html> <head> <meta charset="utf-8"> <title>头像即时预览</title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> //选择封面图片 function preview(file){ var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]){ var reader = new FileReader(); reader.onload = function(evt){ prevDiv.innerHTML = '<img src="' + evt.target.result + '" width="100xp" height="120px"/>'; } reader.readAsDataURL(file.files[0]); } } </script> <style> span, input, img{ margin: 0; padding: 0; list-style: none; border: none; } .img { width: 100px; height: 120px; border: 1px solid #bbb; } .choose { display: inline-block; height: 33px; width: 100px; border: 1px solid #bbb; border-radius: 4px; line-height: 33px; outline: none; text-align: center; color: #0dac75; } .file { position: absolute; left: 0; width: 100px; opacity: 0; } div input { height: 33px; padding-left: 5px; border: 1px solid #bbb; border-radius: 4px; line-height: 33px; outline: none; } input[type="file" i] { align-items: baseline; color: inherit; text-align: start; } </style> </head> <body> <div > <div class="img" id="preview"> </div> <span class="choose">选择头像</span> <input type="file" class="file" onchange="preview(this)" /> </div> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-679648.html

专利

最新回复(0)