js 实现 本地图片 预览
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = document.getElementById(sourceId).files.item(0).getAsDataURL();
}
return url;
}
/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
</form>
</body>
</html>
分享到:
相关推荐
主要为大家详细介绍了基于JavaScript实现本地图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了纯JS实现本地图片预览的方法,基于javascript插件实现本地图片预览功能,具有一定参考借鉴价值,需要的朋友可以参考下
vue 2.5.2 版本 vue组件 实现点击预览大图功能,点击下载图片功能(不兼容IE,适用于PC端) 内部代码可实现点击图片旋转效果,在本处无用,故注释掉,如有需要可打开调整.
js实现本地,客户端,图片预览,清空背景功能,图片可调比例缩小,支持IE8浏览器
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
在上传图片时,经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法...
主要介绍了JS端基于download.js实现图片、视频时直接下载而不是打开预览,需要的朋友可以参考下
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css...
主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
实现图片本地先预览,支持IE6\7\8和FF3.5
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。...但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览 现代的浏览器功能越来越全面,因此可以实现对一些数据的本地处理 Chrome MsEdge(ie11) Firefox 上...
js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9
帮助大家轻轻松松实现js图片预览功能,主要介绍了纯JS实现本地图片预览的方法,具有一定参考借鉴价值,需要的朋友可以参考下