js兼容火狐显示上传图片预览效果【谷歌也适用】

 <!doctype html>

 <html>

     <head>

         <meta content="text/html; charset=GBK" http-equiv="Content-Type" />

         <title>Image preview example</title>

         <style type="text/css">

             div {

                 width: 100px;

                 height: 100px;

                 border: 1px #A3BFE7 solid;

             }

             img {

                 width: atuo;

                 height: atuo;

             }

         </style>

         <script type="text/javascript">

             function viewPic() {

                 var oFReader = new FileReader();

                 oFReader.onload = function(e) {

                     document.getElementById("uploadPreview").src = e.target.result;

                 }

                 if(document.getElementById("uploadImage").files.length === 0) {

                     return;

                 }

                 var oFile = document.getElementById("uploadImage").files[0];

                 oFReader.readAsDataURL(oFile); }

         </script>

     </head>

     <body> <input id="uploadImage" type="file" name="myPhoto" onchange='viewPic();' /><br> <img id="uploadPreview" src="" /> </body>

 </html>

效果：

js兼容火狐显示上传图片预览效果的更多相关文章

  1. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  2. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  5. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  6. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  8. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  9. ios 在storyboard 和 xib中，显示自定义view的预览效果

    发现FSCalendar这个控件能在xib中显示预览效果,是怎么实现的呢?其中涉及的知识又有哪些? 主要就是IBInspectable 和 IB_DESIGNABLE 先看 IBInspectable ...

随机推荐

  1. Pair Project —— Elevator Scheduler

    结对编程人员 12061153 刘丽萍 12061154 冯飘飘 说明结对编程的优点和缺点. 结对编程的优点: 以前都是自己一个人编程,对于相互结对或者团队编程都没有接触过.而自己在写代码时不可避免的 ...

  2. 结对编程 学习手记ver1.2

        团队成员: 226 高雅智 164刘浩然: 一 结对编程 辛辛苦苦搞了好久的时间,就是没有人家的快,明明算法都差不多,哎~~~ 结对的优势,在于双方互相督促,对于代码能贡献自己的能力,人多力量 ...

  3. Daily scrum 12.24

    平安夜闲得想来一遍scrum,添加了之前ui组的数据库问题修复任务. 其实是之前忘记在任务中添加了.现在基本修复完成. Member Today’s task 林豪森 与学霸其他小组交流,处理整合问题 ...

  4. [BUAA软工]第1次阅读

    [BUAA软工]第1次阅读 本次作业所属课程: 2019BUAA软件工程 本次作业要求: 第1次个人作业 我在本课程的目标 熟悉和实践软件工程流程,适应团队开发 本次作业的帮助 帮助理解<构建之 ...

  5. 《Linux内核设计与分析》第十七章读书笔记

    设备与模块 关于设备驱动和设备管理,四种内核成分. 设备类型:在所有Unix 系统中为了统一普通设备的操作所采用的分类． 模块: Linux 内核中用于按需加载和卸载目标码的机制． 内核对象:内核数据 ...

  6. 个人github链接及git学习心得总结

    个人github链接 https://www.github.com/liangjianming/test git学习心得总结​ git是一个快速,开源,分布式的版本控制系统. GitHub是一个基于w ...

  7. C程序设计教学小结（选择结构）

    1. 函数使用的三个问题 函数声明语句   void add();   或  int add(int x,int y); 函数调用            add();     c=add(a,b) 函 ...

  8. 阅读<构建之法>第10、11、12章

    第10章 典型用户和场景 10.2 规格说明书 10.3 功能驱动的设计 问题:怎样写好spec?功能驱动设计的功能设计阶段怎样实现一个具体的功能? 第11章 软件设计与实现 11.2开发阶段的日常管 ...

  9. Quartz中时间表达式的设置-----corn表达式 (转)(http://www.cnblogs.com/GarfieldTom/p/3746290.html)

    Quartz中时间表达式的设置-----corn表达式 (注:这是让我看比较明白的一个博文,但是抱歉,没有找到原作者,如有侵犯,请告知) 时间格式: <!-- s m h d m w(?) y( ...

  10. 第五届蓝桥杯C++B组 地宫取宝

    代码: #include <bits/stdc++.h> using namespace std; #define ll long long const ll mod = 1e9 + 7; ...