在页面预览客户端本地图片的js代码(兼容FF IE)

发布于 2017-07-02 10:45:23 | 123 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

IE为了安全是不允许页面预览客户端本地图片的，也就是img元素的SRC是相对路径不可能是绝对路径的为了达成这一需求需要使用滤镜
公司最近有个项目有这样的需求我才发现我之前写的如何通过JS获取用户本地图片路径这篇文章里所使用的方法只支持本地页面预览本地图片
有一种解决方法是上传到服务器后返回相对路径但是效率是个问题，编程复杂度也会提高
直接上demo代码为更多有这种需求又苦于找不到解决方案的同行提供源码转载请注明出处我这里还有更多的其他问题的解决方案供更多人参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>get file input full path</title> 
<script type="text/javascript" language='javascript'> 
function getFullPath(obj) { 
var newPreview = document.getElementById("img"); 
if (obj) { 
//ie 
if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
obj.select(); 
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"; 
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; 
return; 
} 
//firefox 
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
if (obj.files) { 
newPreview.src = window.URL.createObjectURL(obj.files.item(0)); 
return; 
} 
newPreview.src = obj.value; 
return; 
} 
newPreview.src = obj.value; 
return; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" onchange="getFullPath(this);" /> 
<img class="img-responsive" src="你自己的透明图片" data-src=""/> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最新网友评论 共有(0)条评论发布评论返回顶部

在页面预览客户端本地图片的js代码(兼容FF IE)

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他