读取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版本A*寻路算法
Dec 22 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
js实现扫雷源代码
Nov 27 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Python模拟登录12306的方法
2014/12/30 Python
python素数筛选法浅析
2018/03/19 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python中的错误如何查看
2020/07/08 Python
Python 代码调试技巧示例代码
2020/08/11 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
护理专业自荐信范文
2014/02/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL