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. Gitlab备份和恢复操作记录

    前面已经介绍了Gitlab环境部署记录,这里简单说下Gitlab的备份和恢复操作记录: 1)Gitlab的备份目录路径设置 [root@code-server ~]# vim /etc/gitlab/ ...

  2. HTTP协议冷知识大全

    如果不用HTTPS,HTTP协议如何安全的传输密码信息? HTTP协议是纯文本协议,没有任何加密措施.通过HTTP协议传输的数据都可以在网络上被完全监听.如果用户登陆时将用户名和密码直接明文通过HTT ...

  3. PairProject 总结

    结对编程人员:张迎春,赵梓皓.下面是我们一起编程的照片. 结对编程的优点: 首先,结对编程的目的是为了减少编程的错误,在编程的时候,大家一起检查错误,一起分析有没有更加合理的编写方法,所以这是结对编程 ...

  4. 使用github的感想

    github的仓库链接:https://github.com/liyan941016/test  github是一个基于git的代码托管平台,要想使用github第一步就要注册账户,然后要创建一个仓库 ...

  5. Leetcode——171.Excel表列序号【水题】

    @author: ZZQ @software: PyCharm @file: leetcode171_Excel表列序号.py @time: 2018/11/22 15:29 要求: 给定一个Exce ...

  6. ios开发之--CAKeyframeAnimation的详细用法

    简单的创建一个带路径的动画效果,比较粗糙,不过事先原理都是一样的, 代码如下: 1,创建动画所需的view -(void)creatView { moveView = [UIView new]; mo ...

  7. Spring事务银行转账示例

    https://www.imooc.com/video/9331 声明式事务 @Transactiona() 编程式事务 非模板式(不使用TransactionTemplate) http://cai ...

  8. Vue的router使用

    <div id="app"> <router-link to="/home">home</router-link> < ...

  9. 转帖: 一份超全超详细的 ADB 用法大全

    增加一句 连接 网易mumu模拟器的方法 adb  connect 127.0.0.1:7555 一份超全超详细的 ADB 用法大全 2016年08月28日 10:49:41 阅读数:35890 原文 ...

  10. PRML读书笔记_绪论

    一.基本名词 泛化(generalization) 训练集所训练的模型对新数据的适用程度. 监督学习(supervised learning) 训练数据的样本包含输入向量以及对应的目标向量. 分类( ...