读取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 相关文章推荐
Javascript Object.extend
May 18 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
js实现搜索栏效果
Nov 16 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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
You might like
程序员编程十条戒律
2009/07/09 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
JS代码实现电脑配置检测功能
2018/03/21 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
浅谈Python中range和xrange的区别
2017/12/20 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python实现随机加减法生成器
2020/02/24 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
报关专员求职信范文
2014/02/22 职场文书
获奖感言一句话
2015/07/31 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript