JavaScript实现图片预览

最新推荐文章于 2022-08-23 15:06:24 发布

doubleicon

最新推荐文章于 2022-08-23 15:06:24 发布

阅读量699

点赞数

分类专栏： JavaScript 文章标签： javascript 图片预览 js图片预览

本文链接：https://blog.csdn.net/u011872945/article/details/69152583

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

今天在开发一个上传图片的功能时，图片上传到服务器以后，在显示在客户端，需要等待好长时间，于是查了查JS实现突破预览功能，在此记录一下，以备下次使用时，可以迅速找到；代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
    function previewFile() {
        var preview = document.querySelector('img');
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>

doubleicon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现图片预览

今天在开发一个上传图片的功能时，图片上传到服务器以后，在显示在客户端，需要等待好长时间，于是查了查JS实现突破预览功能，在此记录一下，以备下次使用时，可以迅速找到；代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js图片预览功能</title><scri
复制链接

扫一扫