使用FileReader实现打开本地图片并预览。
挺方便的，可惜不是所有浏览器都支持，坑爹的IE。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function preImg(sourceId, targetId) {
if (typeof FileReader === 'undefined') {
alert('Your browser does not support FileReader...');
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById(targetId);
img.src = this.result;
}
reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" style="display: block;" />
</form>
</body>
</html>
分享到：
相关推荐
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览，效果类似如下： 选择图片前的页面： 选择图片之后的预览效果： 下面直接上代码（只是最简单的实现代码，css...
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
本文实例为大家分享了js本地图片预览的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我...
主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考，具体如下： <html> <head> <title>www.jb51.net 图片上传预览</title> [removed] function PreviewImage...
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
早期浏览器，不能将本地图片作为页面元素处理，要实现图片预览需要将图片先上传到服务器，再从服务器取得进行预览 现代的浏览器功能越来越全面，因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 上...
js实现头像上传并且可预览提交 在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像，并同时预览， 常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在...
最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传《JavaScript File API文件上传预览》，更加觉得html5...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
今天刚试过chrome的drag and drop API，它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情，你的浏览器试图打开一个新的页面并加载这个图片。现在我不想...
该系统通过配合OpenOffice实现文档的在线预览，包括本地文档添加、文档转换为HTML以及文档的HTML方式预览。支持的文档类型包括doc、docx、ppt、pptx、xls、xlsx、zip和rar。适合用于学习和实践Java、CSS、JavaScript...
简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个&...上传图片显示预览
桌面调用.js 使用 HTML、CSS 和 JavaScript 构建的日历生成器。 您可以使用desktopCal.js创建的日历： 桌面日历挂历数字壁纸日历 只需选择所需的布局，月份和年份，然后加载图片即可。 实时预览您的更改，然后打印您...
2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框 3．在浏览器中输入下述地址：http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
2．选择浏览器的“工具”－“安全”－“本地Intranet”－“自定义级别”－“活动脚本”中选用“禁用”单选框 3．在浏览器中输入下述地址：http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
一个基于和的本地图片裁剪插件。 ####License: ###为什么需要这玩意 目前很多的图片上传、裁剪都是基于服务器端的。比如Jcrop，在选择好图片后仅仅是做了一个裁剪的UI，然后发给后端起始位置、大小等参数，由后端来...