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

时间：2021-04-10 08:54:09|栏目：JavaScript代码|点击：次

公司最近有个项目有这样的需求我才发现我之前写的如何通过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 id="img" alt="" style="width:200px; height:200px;" src="你自己的透明图片"/> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：使用javaScript实现鼠标拖拽事件

栏目：JavaScript代码

下一篇：React Native仿美团下拉菜单的实例代码

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

本文地址：http://www.codeinn.net/misctech/98680.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程