读取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控制iframe滚动的代码
Apr 10 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
canvas绘制环形进度条
Feb 23 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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 UBB 解析实现代码
2011/11/27 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python实现数据写入excel表格
2018/03/25 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
生产部岗位职责范文
2014/02/07 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
评先进个人材料
2014/12/29 职场文书