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. ansible环境部署及常用模块总结 - 运维笔记

    一.  Ansible 介绍Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于py ...

  2. Java代码操作properties文件(读取,新增/修改,删除)

    项目中需要用到操作properties文件中的数据,记录一下 package com.bonc.savepic.save; import java.io.FileNotFoundException; ...

  3. BugPhobia回顾篇章：团队Beta 阶段工作分析

    0x00:序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet yo ...

  4. 语音笔记：MFCC

    一,传统语音识别体系结构 二,MFCC特征提取 MFCC(Mel-frequency cepstral coefficients):梅尔频率倒谱系数.梅尔频率是基于人耳听觉特性提出来的, 它与Hz频率 ...

  5. Service Fabric

    Service Fabric 开源 微软的Azure Service Fabric的官方博客在3.24日发布了一篇博客 Service Fabric .NET SDK goes open source ...

  6. react 动态获取数据

    如果reander()里面的dom元素是动态获取的,就要将函数放到setSTATE()里面执行

  7. 学习 已经登录windows的情况下获取windows的密码

    官网 http://blog.gentilkiwi.com/mimikatz 下载地点 https://github.com/gentilkiwi/mimikatz/releases/latest 使 ...

  8. GUI and Usability Test Scenarios

    1 all fields on page (e.g. text box ,radio options, dropdown lists) should be aligned properly2 Nume ...

  9. 03 基于umi搭建React快速开发框架(封装列表增删改查)

    前言 大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢. 这样我们就可以有更多的时间学习一些新的东西.我们这套框 ...

  10. Flatpak 1.1.0发布：可终止运行Flatpak实例

    读 Flatpak的Alex Larsson发布了流行的Linux应用程序沙盒和分发框架的新版本,该框架有望成为跨Linux操作系统的应用程序分发的未来. Flatpak 1.1.0现已作为开始推出F ...