专栏首页me的随笔H5实现本地预览图片

H5实现本地预览图片

我们使用H5可以很容易的实现图片上传前对其进行预览的功能

Html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UploadFile</title>
</head>
<body>
   <div>
        <img src="" id="img" style="width:200px;height:300px;" />
    </div>
    <input type="file" id="file" />
</body>
</html>

实现预览功能的js代码如下:

<script type="text/javascript">
    window.onload = function () {
        var fileTag = document.getElementById('file');
        fileTag.onchange = function () {
            var file = fileTag.files[0];
            var fileReader = new FileReader();
            fileReader.onloadend = function () {
                if (fileReader.readyState == fileReader.DONE) {
                    document.getElementById('img').setAttribute('src', fileReader.result);
                }
            };
            fileReader.readAsDataURL(file);
        };
    };
</script>


预览效果如下:

最后注意一点,H5实现图片预览只能使用原生JS进行DOM元素的操作,若使用jQuery则无法实现该效果。

参考文章:

H5中的File对象 H5中的FileList对象 H5中的FileReader对象 在web应用中使用文件

版权声明

本文为作者原创,版权归作者雪飞鸿所有。 转载必须保留文章的完整性,且在页面明显位置处标明原文链接

如有问题, 请发送邮件和作者联系。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 读写二进制文件与文本文件

    文件分为两类:二进制文件和文本文件。所有数据在计算机中均以二进制形式存在,这里所说的二进制和文本是以程序解释文件数据的方式来区分的。

    雪飞鸿
  • ASP.NET MVC5中View-Controller间数据的传递

    使用ASP.NET MVC做开发时,经常需要在页面(View)和控制器(Controller)之间传递数据,那么都有哪些数据传递的方式呢?

    雪飞鸿
  • ASP.NET Core MVC 视图

    布局用于提供各个页面所需的公共部分,如:菜单、页头、页尾等。在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的_Layout....

    雪飞鸿
  • Oracle启动报错ORA-03113解决

    步骤摘要: 1.启动报错ORA-03113 2.查看alert日志查找原因 3.根据实际情况采取合理的措施,这里我们先增加闪回区大小,把库启动起来 4.制定对应...

    Alfred Zhao
  • 过气的00截断

    截断的核心,就是 chr(0)这个字符 先说一下这个字符,这个字符不为空 (Null),也不是空字符 (""),更不是空格。 当程序在输出含有 chr(0)变量...

    安恒网络空间安全讲武堂
  • php批量修改图片名称

    素描
  • PHP丨实现可判断类型限制大小的原生文件上传,图片上传等

    V站CEO-西顾
  • 奇异值分解 SVD 的数学解释

    奇异值分解(Singular Value Decomposition,SVD)是一种矩阵分解(Matrix Decomposition)的方法。除此之外,矩阵分...

    Alan Lee
  • 已有Qemu了,为什么还要StratoVirt?

    1.目前 qemu已经有157万代码,而且其中又有很大一部分代码是用来支持legacy特性或者设备的,功能和设备严重耦合在一起,导致无法轻装上阵。

    虚拟化云计算
  • Vue 使用Axios上传文件

    剑行者

扫码关注云+社区

领取腾讯云代金券