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 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

41890
来自专栏Python中文社区

PyQt5 GUI应用程序工具包入门(2)

下面我们从一个简单的登录对话框来了解PyQt5的开发过程。 PyQt5支持两种界面开发方式:一种是在QtDesigner中设计界面,各种控件直接通过拖动添加;...

34390
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

25810
来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架之绑定(二)

上一篇我们已经一起编写了框架的基础结构,并且实现了ViewModel反向控制Xaml窗体。

16520
来自专栏calvin

Quill编辑器介绍及扩展

从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内...

60620
来自专栏24K纯开源

Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全

导读       行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛。一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器。QLi...

27180
来自专栏Youngxj

PHP setcookie无效的原因分析

27550
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

35070
来自专栏liulun

【翻译】WPF4.5新特性(MSDN的翻译读不太懂)

我很在意WPF的发展,有人说微软不再维护WPF了,无所谓,随他去。 MSDN上有简体版:http://msdn.microsoft.com/zh-cn/libr...

20470
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

32270

扫码关注云+社区

领取腾讯云代金券