本文介绍了一个使用HTML和JavaScript实现的简单图片上传和预览功能。通过FileReader API读取用户选择的图片文件，并将其显示在页面上。文章详细展示了如何设置HTML结构，包括输入元素和预览区域，以及JavaScript代码中如何监听文件输入变化并处理图片。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<div class="yanzRight">
<input name="evidence" οnchange="uploadImg()" type="file" />
<!-- <span class="dui" id="imgOrder_dui" style="display: none;"></span> -->
</div>
<div id="preview">
<img src="" alt="" id="imghead5" height="200" width="200" />
</div>
</body>
<script>
function uploadImg() {
console.log(this)
console.log(ipt)
var widthImg = 200; //显示图片的width
var heightImg = 200; //显示图片的height
var div = document.getElementById('preview');
var ipt = document.querySelector('input')
console.log(div)
// if (ipt.files && ipt.files[0]) {
// console.log(e.files,e.files[0])
div.innerHTML = '<img id="upImg">'; //生成图片
console.log(div)
var img = document.getElementById('upImg'); //获得用户上传的图片节点
img.onload = function () {
img.width = widthImg;
img.height = heightImg;
console.log(img)
}
FileReader方法
var reader = new FileReader(); //判断图片是否加载完毕
console.log(reader)
var gs = ipt.value.split('.')[1]
if (gs == 'jpg') {
reader.onload = function (evt) {
if (reader.readyState === 2) { //加载完毕后赋值
img.src = evt.target.result;
}
}
}else{
alert('格式不符合要求')
}
reader.readAsDataURL(ipt.files[0]);
console.log(ipt.files[0])
// }
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
