读取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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
asp批量修改记录的代码
Jun 25 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
详解Vue中watch的高级用法
May 02 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python中time库的实例使用方法
2019/10/31 Python
Python的pygame安装教程详解
2020/02/10 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
数控专业大学生的自我鉴定
2013/11/13 职场文书
班级学习计划书
2014/04/27 职场文书
教师评语大全
2014/04/28 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
运动会入场词
2015/07/18 职场文书
装修公司管理制度
2015/08/05 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS