H5实现本地预览图片

简介: 我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: DOCTYPE html> UploadFile 实现预览功能的js代码如下: window.

我们使用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应用中使用文件

版权声明

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

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

目录
相关文章
|
10月前
|
存储 算法 C#
C# 生成指定图片的缩略图
C# 生成指定图片的缩略图
|
10月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
318 3
|
Android开发
安卓图片预览实现
安卓图片预览实现
76 0
|
算法 计算机视觉
图片的美白与美化
图片的美白与美化
158 0
|
Python
【图片操作】批量生成缩略图
在我们日常生活中,缩略图很大程度减少了我们内存的使用。如果我们看一张图片就必须加载完成后才能看,那么我们就会发现很多应用都变慢了很多,而且流量也消耗的很快。今天我们就来看看Python生成缩略图的操作。
416 0
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
195 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
|
Web App开发 存储 数据安全/隐私保护
文档预览功能使用技巧(3)---文字水印
智能媒体管理提供了文档预览功能,通过快速搭建文章的介绍,详细描述了使用“文档转换 + JS 前端渲染引擎” 实现文档预览的过程,本文将介绍预览功能中的文字水印技巧。
3367 0