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" ...
- 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.url.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 ...
随机推荐
- ABP文档 - Hangfire 集成
文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...
- 23种设计模式--单例模式-Singleton
一.单例模式的介绍 单例模式简单说就是掌握系统的至高点,在程序中只实例化一次,这样就是单例模式,在系统比如说你是该系统的登录的第多少人,还有数据库的连接池等地方会使用,单例模式是最简单,最常用的模式之 ...
- IIC驱动移植在linux3.14.78上的实现和在linux2.6.29上实现对比（deep dive)
首先说明下为什么写这篇文章,网上有许多博客也是介绍I2C驱动在linux上移植的实现,但是笔者认为他们相当一部分没有分清所写的驱动时的驱动模型,是基于device tree, 还是基于传统的Platf ...
- [开发笔记]yum错误
yum 错误TypeError: rpmdb open failed 解决办法 是因为RPM数据库出现损坏导致的,它导致所有的软件的升级.安装甚至是删除都会出现问题,终端出现乱码,YUMEX也用不成, ...
- iOS架构一个中型普通App的一些经验总结
这一版比较完善的的App终于提交审核了.有时间写写自己的一些经验的总结了.自己主导的从0到比较成型的app到目前来说也只有两个,但是其中的很多东西都是大同小异.基本上是想到了什么就写什么,感觉写的不到 ...
- yaf的简单入门
1.目录结构: 2.入口文件 入口文件是所有请求的入口,一般都借助于rewrite规则,把所有的请求都重定向到这个入口文件. 一个经典的入口文件 public/index.php 3.重写规则 需要 ...
- css3更改input单选和多选的样式
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- 微信开发笔记(accesstoken)
access_token分两种 一种是公众号权限获取用,调用cgi-bin接口 ,此种token一个公众号同时只有一个,用这一个就够了. 服务器最好缓存. 用这个token前提是用户关注了此公众号. ...
- docker4dotnet #4 使用Azure云存储构建高速 Docker registry
使用Docker来构建应用程序最常见的操作就是 docker run 或者 docker pull了,但是由于众所周知的原因,在国内想要高速稳定的获取docker hub上面的资源并不是件容易的事情, ...