1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    5. <title>Image preview example</title>
    6. <script type="text/javascript">
    7. var loadImageFile = (function () {
    8. if (window.FileReader) {
    9. var oPreviewImg = null, oFReader = new window.FileReader(),
    10. 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;
    11.  
    12. oFReader.onload = function (oFREvent) {
    13. if (!oPreviewImg) {
    14. var newPreview = document.getElementById("imagePreview");
    15. oPreviewImg = new Image();
    16. oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
    17. oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
    18. newPreview.appendChild(oPreviewImg);
    19. }
    20. oPreviewImg.src = oFREvent.target.result;
    21. };
    22.  
    23. return function () {
    24. var aFiles = document.getElementById("imageInput").files;
    25. if (aFiles.length === 0) { return; }
    26. if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
    27. oFReader.readAsDataURL(aFiles[0]);
    28. }
    29.  
    30. }
    31. if (navigator.appName === "Microsoft Internet Explorer") {
    32. return function () {
    33. alert(document.getElementById("imageInput").value);
    34. document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
    35.  
    36. }
    37. }
    38. })();
    39. </script>
    40. <style type="text/css">
    41. #imagePreview {
    42. width: 160px;
    43. height: 120px;
    44. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    45. }
    46. </style>
    47. </head>
    48. <body>
    49. <div id="imagePreview">
    50. </div>
    51. <form name="uploadForm">
    52. <p>
    53. <input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
    54. <input type="submit" value="Send" /></p>
    55. </form>
    56. </body>
    57. </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. ajax操作时用于提高用户体验的两段备用代码

    <div id="msgBoxDIV" style="position: absolute; width: 50%; padding-top: 2px; heigh ...

  2. static的本质

    通过反编译发现,static的本质是abstract sealed.因此,无法继承System.Math类,因为它是static的.

  3. Centos rsync+inotify 实现数据同步备份

    最近公司做了一

  4. mysql安装及卸载

    一.关于mysql MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...

  5. tab1

    <html> <head> <meta charset="UTF-8"> <title>tab</title> < ...

  6. 一次有趣的XSS漏洞挖掘分析(3)最终篇

    这真是最后一次了.真的再不逗这个程序员了.和预期一样,勤奋的程序员今天又更新程序了.因为前面写的payload都有一个致命的弱点,就是document.write()会完全破坏DOM结构.而且再“完事 ...

  7. centos6.6 安装 LXC

    LXC,简称Linux containers是docker基础,无奈只能先学习LXC.LXC用途就不多讲,这里只讲LXC的安装以及用途吧! LXC 需要用在内核2.6.27以上 这个可以用 uname ...

  8. java中内部类使用小结

    内部类是指在一个外部类中再定义一个类,类名不需要和文件名相同 内部类可以是静态的,类的修饰符可以是private,default,protect,public修饰 ,而外部类只能是public 和 d ...

  9. 用refresh控制浏览器定时刷新

    package cn.itcast.response; import java.io.IOException; import java.util.Random; import javax.servle ...

  10. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...