读取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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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验证码
2015/05/04 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
Python深入学习之闭包
2014/08/31 Python
简单学习Python time模块
2016/04/29 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
林肯就职演讲稿
2014/05/19 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
华清池导游词
2015/02/02 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS