正文
H5 实现图片上传预览
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>图片上传预览</title>
<style>
.check_box{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
#img_preview1{
display: block;
width: 100px;
height: auto;
}
input#zx_img1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
opacity: 0;
z-index: 9;
} </style>
</head> <body> <div class="check_box">
<img id="img_preview1" src="./images/add.png" alt="上传图片">
<input type="file" name="file" id="zx_img1" style="padding: 0px;" accept="image/jpeg, image/jpg, image/png, image/gif "
placeholder=" 上传文件">
</div>
<p>
图片大小支持50kb以内,支持拓展名:jpg,png,gif
</p> <!--引入jQuery插件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
$("#zx_img1").change(function (e) {
var file = e.target.files || e.dataTransfer.files;
if (file) { if (file[0] && (file[0].size / 1024).toFixed(0) > 50) {
console.log('你选择的文件太大，文件大小为：' + (file[0].size / 1024).toFixed(0) + "kb");
// return false
}
var reader = new FileReader();
reader.onload = function () {
console.log(this.result);
$("#img_preview1").attr("src", this.result);
}
reader.readAsDataURL(file[0]);
}
});
</script>
</body> </html>
