读取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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
Laravel框架表单验证详解
2014/09/04 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
利用Python爬取可用的代理IP
2016/08/18 Python
Python编写一个闹钟功能
2017/07/11 Python
Python的高阶函数用法实例分析
2019/04/11 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
秋季运动会广播稿
2014/02/22 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
实习指导老师评语
2014/04/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
西湖英语导游词
2015/02/06 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
网络舆情信息简报
2015/07/21 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Python利用zhdate模块实现农历日期处理
2022/03/31 Python