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. Scrutiny of Partner's individual project Code

    因为队友的代码并没有完整的实现个人项目的完整功能. 已实现功能: 1.对单个单词进行词频统计 2.能够按照老师的要求的格式对制定的有效字符串进行匹配,并且输出至指定文件. 未实现: 1.对连续多个单词 ...

  2. Android之JSON格式数据解析

    查看原文:http://blog.csdn.net/hantangsongming/article/details/42234293 JSON:JavaScript 对象表示法(JavaScript ...

  3. （转）SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM之间

    原因: 出现这种问题多半是因为你插入或者更新数据库时,datetime字段值为空默认插入0001年01月01日造成datetime类型溢出. 传给数据库表的时间类型值是null值.这里的null指的是 ...

  4. HTML 引入Css样式

  5. 编写一个shell脚本来编译并运行java代码

    概述 编译和运行java分别要用到javac命令和java命令,虽然可以使用IDE(比如eclipse,InteliJ,NetBean...),按一下快捷键就可以实现编译并运行,但是,在之前还要配置一 ...

  6. Java解析Excel

    前两天总结了些关于Excel和CSV结合TestNG进行数据驱动测试的例子,对于Excel存放TestCase和关键字如何进行解析,也做了对应的总结,希望在学习的路上勇往直前,有不对的地方,希望大家指 ...

  7. mybatis model属性注入多个对象 与model属性注入单个对象

  8. BZOJ4516 SDOI2016生成魔咒（后缀数组+平衡树）

    一个字符串本质不同的子串数量显然是总子串数减去所有height值.如果一个个往里加字符的话,每次都会改动所有后缀完全没法做.但发现如果从后往前加的话,每次只会添加一个后缀.于是我们把字符串倒过来,每次 ...

  9. mvc 验证登录

    很多时候,我们需要多个页面验证用户是否登录 有2中方法. 一种是继承 Attrbuite属性,添加验证,这个可以网上搜索. 我一般使用下面的方式 创建BaseWebController继承Contro ...

  10. UVA-1572

    解题思路: 之前看到的骚操作,主要思想就是把两个面合在一起看成两个点相连,最后只要找到一个环就可以无限克隆这个环使得无限延迟. 把符号变成数字如A-变为0,A+变为1,则0^1=1 ,这两个符号可以通 ...