编程 Javascript

读取input:file的路径并显示本地图片的方法

Posted in Javascript onSeptember 23, 2013

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
var loadImageFile = (function () { 
if (window.FileReader) { 
var oPreviewImg = null, oFReader = new window.FileReader(), 
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { 
if (!oPreviewImg) { 
var newPreview = document.getElementById("imagePreview"); 
oPreviewImg = new Image(); 
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
newPreview.appendChild(oPreviewImg); 
} 
oPreviewImg.src = oFREvent.target.result; 
}; 
return function () { 
var aFiles = document.getElementById("imageInput").files; 
if (aFiles.length === 0) { return; } 
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
oFReader.readAsDataURL(aFiles[0]); 
} 
} 
if (navigator.appName === "Microsoft Internet Explorer") { 
return function () { 
alert(document.getElementById("imageInput").value); 
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 
} 
} 
})(); 
</script> 
<style type="text/css"> 
#imagePreview { 
width: 160px; 
height: 120px; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
<div id="imagePreview"> 
</div> 
<form name="uploadForm"> 
<p> 
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
</form> 
</body> 
</html>

但是需要注意的是在IE8中由于IE8自作聪明的将真实路径隐藏起来了用alert打印的结果是C:/fakepath/*.jpg 所以导致该方法无法使用

解决办法是：进入工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery源码分析-04 选择器-Sizzle-工作原理分析

Nov 14 Javascript

js 关键词高亮(根据ID/tag高亮关键字)案例介绍

Jan 21 Javascript

window.showModalDialog()返回值的学习心得总结

Jan 07 Javascript

jQuery操作元素css样式的三种方法

Jun 04 Javascript

JS简单生成两个数字之间随机数的方法

Aug 03 Javascript

vue router路由嵌套不显示问题的解决方法

Jun 17 Javascript

Vue学习笔记进阶篇之vue-cli安装及介绍

Jul 18 Javascript

JS中正则表达式要注意lastIndex属性

Aug 08 Javascript

JS实现的简单标签点击切换功能示例

Sep 21 Javascript

基于vue-ssr服务端渲染入门详解

Jan 08 Javascript

高性能的javascript之加载顺序与执行原理篇

Jan 14 Javascript

vue@cli3项目模板怎么使用public目录下的静态文件

Jul 07 Javascript

js/html光标定位的实现代码

Sep 23 #Javascript

JS加jquery简单实现标签元素的显示或隐藏

Sep 23 #Javascript

JQuery操作单选按钮以及复选按钮示例

Sep 23 #Javascript

通过AJAX的JS、JQuery两种方式解析XML示例介绍

Sep 23 #Javascript

js如何取消事件冒泡

Sep 23 #Javascript

页面载入结束自动调用js函数示例

Sep 23 #Javascript

往光标所在位置插入值的js代码

Sep 22 #Javascript