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. 详解centos7配置本地yum源的方法

    近在使用虚拟机时遇到一些麻烦,因为公司内部有网络管理,所以vm连接不上外网,yum无法安装软件,怎么解决呢?–使用iso做本地yum源,可以解决大部份的包安装. vm安装的是centos7. 1.挂载 ...

  2. mooc linux学习总结

    通过八周的学习获得了很多知识.       首先,通过网课老师形象生动的讲述和描述一些专业词汇,使我更加深刻的记住并掌握了这些内容:动态的展示堆栈的变化,更容易理解一段汇编代码:分析操作系统的工作,记 ...

  3. guthub第一次作业连接及心得体会

    https://github.com/12wangmin/ GitHub的本意是旨在成为一种开放的软件协作平台,但它目前已成为一个巨大的综合性的平台,其作用远远超过单纯地开源代码.它现在在艺术家.建筑 ...

  4. Hibernate_HQL

    public class According_condition { public static void main(String[]args){ Session session=HibernateU ...

  5. 软件工程-pair work[附加题]

    首先,在分组之前,我和室友周敏轩已经详细阅读了往届学长的博客,认为电梯调度这个项目应该先做UI会比较好一点,于是动手展开了UI的编写;但分组结果并没有如我们所愿,但我们依然共同进行了UI的编写,希望在 ...

  6. 转：为Docker容器设置固定IP实现网络联通(1)——通过Pipework为Docker容器设置

    https://blog.csdn.net/chinagissoft/article/details/51250839 1. 创建并启动一个容器: docker run --cap-add=NET_A ...

  7. WebLogic: 内存溢出

    每次部署完项目,重启Weblogic服务,总是遇到java.lang.OutOfMemoryError: PermGen space,其实物理内存也是够的,当时的解决方法就是多重启几次Weblogic ...

  8. Linux CentOS虚拟机网卡配置

    最近在VMware安装CentOS6.5之后,每次从宿主机访问虚拟机的Oracle时,都要修改IP地址,因为没有设置虚拟机的IP,所以每次开机之后虚拟机的IP地址都是随机的,于是研究了下给虚拟机配置静 ...

  9. java中的随机数Random

    java中一般有两种随机数,一个是Math中random()方法,一个是Random类. 一.Math.random()  :     随即生成0<x<1的小数 实例:如何写,生成随机生成 ...

  10. Windows平台下面Oracle11.2.0.1 升级Oracle11.2.0.4 的简单步骤

    1. 首先查看数据库的版本: 2. ESXi 上面的虚拟机挂在 oracle11.2.0.4的 iso磁盘 3. 执行set 进行升级 4. 安装选项进行选择 升级现有的数据库 5. 注意安装位置必须 ...