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

版权声明

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

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

H5实现本地预览图片的更多相关文章

本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quot ...
FileReader本地预览图片
<body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...
js 本地预览图片和得到图片实际大小
//填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...
js在本地预览图片
移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...
angular +H5 上传图片与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...
js本地预览图片
废话不说直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...
浏览器本地预览图片 window&period;url&period;createobjecturl
第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...
web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
jquery 图片本地预览
uploadPreview.js /* *名称:图片上传本地预览插件 v1.1 *介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE 谷歌火狐) 不支持safari *参数说明: I ...

随机推荐

神技！微信小程序（应用号）抢先入门教程（附最新案例DEMO-豆瓣电影）持续更新
微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...
[原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
IIC总线
一. 概述 1. IIC总线是PHILIPS公司推出的一种串口总线,是具备多主机系统所需的包括总线裁决和高低速器件同步功能的高性能串口总线. 2. IIC总线只有两根双向信号线.一根是数据线SDA,一 ...
java向Excel文件写入数据
/*使用之前要记得导入第三的jar包这个是我之前使用的时候那别人的东西自己修改了一下还没来得及好好地封装一下还望见谅,注释我感觉写的挺清楚的就在不进行解释代码了*/package com.zzp.E ...
初识html5 File API实现带有进度提示的文件上传
Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...
【转】UINavigationBar 使用总结
原文网址:http://www.jianshu.com/p/f0d3df54baa6 UINavigationBar是我们在开发过程中经常要用到的一个控件,下面我会为大家介绍一些常用的用法. 1. 设 ...
Servlet Examples
Servlet Examples Servlet Examples 1.Hello World output: code: 1.import java.io.*;2.import javax.serv ...
【转载】django在eclipse环境下建web网站
一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设 ...
iOS GCD中级篇 - dispatch&lowbar;group
1.关于dispatch_group 把一组任务提交到队列中,这些队列可以不相关,然后监听这组任务完成的事件. 最常见的几个方法: 1.dispatch_group_create创建一个调度任务组 2 ...
window&period;onload与&dollar;(document)&period;ready()
window.onload是原生JS事件,$(document).ready()是Jquery实现的与其作用类似的事件. 二者区别如下: 1.执行时间不同 $(document).ready()是DO ...