• 兼容全浏览器的本地图片预览


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

    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值。

  • 相关阅读:
    【模板】辗转相除法
    【模板】冰茶姬(大概是全的?)
    【模板】快速幂
    【模板】线段树-区间修改
    【模板】线段树-单点修改,区间查询
    【模板】dijkstra与floyd
    【模板】SPFA(不完全详解)
    【济南集训】随机分数
    P3205 [HNOI2010]合唱队
    最大子列2
  • 原文地址:https://www.cnblogs.com/HCJJ/p/5272977.html
Copyright © 2020-2023  润新知