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

版权声明

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

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

目录
相关文章
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1937 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
828 0
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
|
Web App开发 JavaScript 前端开发
预览待上传的本地图片
预览待上传的本地图片 Image Upload Preview   上传文件是一种很普通的Web应用,尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个主题相关的内容(只限前端部分,上传的实现当然就不在此列了),关键词是:Javascript、DOM和Firefox。 表单   先创建一个file表单域,我们需要用它来浏览本地文件。 &lt;form name="for
1321 0
|
C# .NET 开发框架
快速预览:C# 3.0的新东西
Lambda 表达式: Func doubleAppend= x => x + x; Console.WriteLine (doubleAppend(“test”)); // testtest LINQ 查询: string[] n...
630 0
|
Android开发
安卓图片预览实现
安卓图片预览实现
82 0
|
Android开发
【Android源码解析】选择多张图片上传多图预览
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47731439    最近做了选择多图并且上传服务器,在网上找了一些demo,适当的做了一下调整,用过了不能忘记,记下来以后还能多看看,本人觉得自己的博客有些渣渣,还希望大家不要介意啊,哪里有错误希望大家及时指正。
1087 0
|
Web App开发 JavaScript 前端开发
图片上传预览原理及实现
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。 追根溯源 设想 原理 DataURL浅析 格式 预览实现 HTML JavaScript控制 预览效果 打包封装 简易封装 使用方式 测试 总结 追根溯源 设想 一开始,按照我的思路,预览可能是这么来实现的。
1720 0