1. <!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>

读取input:file的路径并显示本地图片的方法的更多相关文章

  1. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  2. HTML input="file" 浏览时只显示指定文件类型 xls、xlsx、csv

    html input="file" 浏览时只显示指定文件类型 xls.xlsx.csv <input id="fileSelect" type=" ...

  3. Android 使用ContentProvider扫描手机中的图片，仿微信显示本地图片效果

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/1873 ...

  4. tomcat中显示本地图片①（未解决）

    <本模块文仅作为学习过程中的自我总结,有需要可参看,欢迎指导与提出建议,很多地方可能断章取义,理解不到位,虚心求学.谢谢!> 资料查阅原因:2018/7/10(做项目中显示详情页面,从数据 ...

  5. Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果

    大家好!过完年回来到现在差不多一个月没写文章了,一是觉得不知道写哪些方面的文章,没有好的题材来写,二是因为自己的一些私事给耽误了,所以过完年的第一篇文章到现在才发表出来,2014年我还是会继续在CSD ...

  6. Atitit. html 使用js显示本地图片的设计方案.doc

    Atitit. html 使用js显示本地图片的设计方案.doc 1.  Local mode  是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无 ...

  7. 在InternetExplorer.Application中显示本地图片

    忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...

  8. Slog71_选取、上传和显示本地图片GET ！（微信小程序之云开发-全栈时代3）

    ArthurSlog SLog-71 Year·1 Guangzhou·China Sep 12th 2018 ArthurSlog Page GitHub NPM Package Page 掘金主页 ...

  9. Android ImageView显示本地图片

    Android ImageView 显示本地图片 布局文件 <?xml version="1.0" encoding="utf-8"?> <R ...

随机推荐

  1. 51nod算法马拉松13

    A 取余最长路 不难发现路径可以拆成三条线段,只要知道两个转折点的位置就能计算出答案. 设sum(i,l,r)表示第i行从l到r元素的和,则答案可以表示为sum(1,1,x)+sum(2,x,y)+s ...

  2. jQuery 基本过滤选择器注意点

    $(".add_shuxing_ul > li:first")  选择class为add_shuxing_ul 的子级li元素的第一个li $(".add_shux ...

  3. VS2010 F5调试时出现：“ 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常”解决

    VS2010 F5调试时出现 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常 两个解决方法:1) 打开项目属性,选择调试选项卡,将“启用非托管代码调试”一项钩上.2) 打开项目属性,选择调试选 ...

  4. Express 路由

    路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求. 路由是由一个 URI.HTTP 请求(GET.POST等)和若干个句柄组成,它的结构如下: app.METHOD(path, [ ...

  5. 升级WebService图形服务，将K10.2和K10.3写到一个类库，所有服务放在一个类库

    问题描述: 平时负责电子政务和图形调用部分,凡是牵涉到图形的都需要调用WebService服务,因此很多工程都需要添加web服务引用,现在WebForm的工程一个是10.2版本,一个是10.3版本,区 ...

  6. SpringMVC——接收请求参数和页面传参

    Spring接收请求参数: 1.使用HttpServletRequest获取 @RequestMapping("/login.do") public String login(Ht ...

  7. If A wants to use B

    Find the place where B is used, and use C to call C.B RootFrame.Navigated += CheckForResetNavigation ...

  8. WebApp之Meta标签

    <meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 < ...

  9. 用脚本来简化iOS美术同学的工作

    用脚本来简化iOS美术同学的工作 问题 我们知道,在 iOS 开发中,为了使我们的 app 能够同时支持 iPhone 的 Retina 屏幕和普通屏幕,美术同学需要对 UI 设计稿中的每个元素进行 ...

  10. Unix NetWork Programming -- 环境搭建（Ubuntu 12.04 x86_64）

    1. 下载源代码:http://www.ituring.com.cn/book/download/60498ad9-ede6-4023-a92b-04d47be23578 2. 解压文件后进入文件根目 ...