<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" id="uploadImg" onchange="xmTanUploadImg(this)">
<img src="" alt="" id="selectImg" style="display: none;">
<a href="javascript:void()" download="picture.jpg" id="xmTanDownload">点此下载</a>
</body>
<script>
function xmTanUploadImg(obj) {
var file = obj.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) { //成功读取文件
var img = document.getElementById("selectImg");
img.src = e.target.result; //或 img.src = this.result / e.target == this
var imgs=document.getElementById("selectImg");
imgs.style.display="block";
console.log("6666")
//实现点击下载图片功能
var xmTanDownload = document.getElementById("xmTanDownload");
xmTanDownload.setAttribute("href", e.target.result); //给a标签设置href
};
}
</script>
</html>
html实现上传图片显示预览下载
最新推荐文章于 2023-11-12 22:05:43 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)