前端上传图片添加缩略图展示

最近做图片上传需要有一个缩略图展示功能. 找了一些前端上传插件, 发现几乎都是先把图片上传到服务器然后返回图片链接给前端用作图片缩略图.

这就造成了一个问题: 你丫的, 我还没点提交呢, 你就给我把图传到服务器了???

简直脑瘫操作, 还是自己手撸一个吧.

直接贴代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传缩略图</title>
</head>
<body>
    <div>
        <input type="file" id="cover_file">
    </div>
    <div>
        <img width="120px" src="" id="thumb" alt="缩略图" style="display: none;" />
    </div>
　　<script>
　　　　window.onload = function (){
　　　　　　let cover_file = document.getElementById("cover_file");
　　　　　　cover_file.onchange = function (){
　　　　　　　　let file = document.getElementById("cover_file").files[0];
　　　　　　　　//使用FileReader读取文件
　　　　　　　　if(window.FileReader) {
　　　　　　　　　　let freader = new FileReader();
　　　　　　　　　　freader.readAsDataURL(file);
　　　　　　　　　　freader.onloadend = function(e) {
　　　　　　　　　　　　document.getElementById("thumb").src = e.target.result;
　　　　　　　　　　　　document.getElementById("thumb").style = "";
　　　　　　　　　　};
　　　　　　　　}else {
　　　　　　　　　　alert("你的浏览器不支持FileReader!");
　　　　　　　　}
　　　　　　}
　　　　}
　　</script>
</body>
</html>

 

posted @ 2021-09-06 15:46  OneNightStand  阅读(919)  评论(0)  编辑  收藏  举报