JS预览图像将本地图片显示到浏览器上
更新时间：2013年08月25日 13:35:53 作者：
本代码从file域获取本地图片url并将本地图片显示到浏览器上，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
复制代码 代码如下:
<!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 = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
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>
相关文章
本文给大家谈一下如何优化async代码，更充分的利用异步事件流杜绝滥用async，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
一句话控制框架的刷新2008-08-08
很多朋友需要使用到cookies操作，脚本之家以前也发表了不少相关的文章。这篇文章，虽然乱了点，但知识点比较多。2010-07-07
这篇文章主要介绍了JavaScript 内置对象 BigInt详细解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
js中for...in循环对象时输出key值顺序混乱问题解决
很久之前就有前辈告诉我用for...in循环对象属性的顺序不是固定的,xiam 这篇文章主要给大家介绍了关于js中for...in循环对象时输出key值顺序混乱问题解决方法,需要的朋友可以参考下2023-11-11
下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
javascript将json格式数组下载为excel表格的方法
下面小编就为大家分享一篇javascript将json格式数组下载为excel表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了ES6基础之展开语法(Spread syntax)，主要介绍了扩展语法的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
我们在开发中常遇到一种情况,在创建一个元素之后,需要给它绑定事件,这篇文章主要给大家介绍了关于js为新添加元素添加绑定事件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了JS调用打印机功能的方法,结合完整实例形式分析了javascript打印机功能的相关设置与使用技巧,需要的朋友可以参考下2016-11-11
最新评论