zoukankan      html  css  js  c++  java
  • 兼容全浏览器的本地图片预览

    为了实现浏览器本地图片预览功能,我使用了三种方式:

    1. 通过HTML5的FileApi 获取文件列表,然后转换成base64编码。

    2. 使用IE的滤镜来规避IE高版本的安全性检测。

    3. 最粗暴的方式,获取File文件域的value值。

    -----------------------------------------------------------------------

    下面贴代码:

     1   ;(function(root){
     2 
     3     function ImagePreview(params){
     4             
     5         var _this = this;
     6 
     7         this.file = document.getElementById(params.dom);
     8         this.imgbox = document.getElementById(params.obj);
     9         this.img = new Image();
    10 
    11         this.file.onchange=function(){
    12             _this.core(this);
    13         }
    14     }
    15 
    16     ImagePreview.prototype.core=function(t){
    17         var _this = this;
    18         if(window.FileReader){
    19 
    20             var fileReader = new FileReader();
    21             fileReader.readAsDataURL(t.files[0]); 
    22             fileReader.onload=function(e){ 
    23                 var ev = e || window.event;
    24                 _this.img.src = ev.target.result; 
    25 
    26             }
    27         }else if(document.all){
    28 
    29             if(!-[1,] && !window.XMLHttpRequest){ 
    30                 this.img.src = t.value;
    31             }else{
    32                 t.select();
    33                 t.blur();
    34                 var imgurl = document.selection.createRange().text;
    35 
    36                 this.imgbox.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale",src="'+ imgurl +'")'; 
    37                 return false;
    38             }
    39 
    40         }else{
    41 
    42             if(this.file.files){  
    43                 var url = this.file.files[0].getAsDataURL() 
    44                 this.img.src = url;
    45             }else{ 
    46                 this.img.src = t.value;
    47             }
    48 
    49         }
    50 
    51         this.imgbox.appendChild(this.img);
    52     }
    53 
    54     root.ImagePreview=function(p){
    55         new ImagePreview(p);
    56     }
    57 
    58 })(window)

    调用方式:

    ImagePreview({'dom':'file','obj':'imagebox'});

    说明:*file 是 input:file的id。

         *obj 是要显示图片位置的id值。

  • 相关阅读:
    学习笔记: yield迭代器
    学习笔记: 委托解析和封装,事件及应用
    学习笔记: MD5/DES/RSA三类加密,SSL协议解析
    学习笔记: Expression表达式目录树详解和扩展封装
    学习笔记: Expression表达式目录树详解和扩展封装
    学习笔记: IO操作及序列化
    数据类型转换
    短路运算(逻辑运算是短路运算中最常见的一种)
    清除浮动
    css初始化
  • 原文地址:https://www.cnblogs.com/HCJJ/p/5272977.html
Copyright © 2011-2022 走看看