关于javascript 图片上传预览图

在传统的ie6浏览器，通过$("#file")获取的file能够得到完整的路径，但随着浏览器安全性的提高，要实现图片上传预览也越来越困难，现在将实现的点滴记录下来，参考地址：http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html

 

 

html代码：

<table>
    <tr>
        <td>预览图</td>
        <td><img id="showimg_image"><input type="file" name="image" id="image" onchange="image_upload()" /></td>
    </tr>
    <tr>
        <td>ICON</td>
        <td><img id="showimg_icon"><input type="file" name="icon" id="icon" /></td>
    </tr>
</table>

 

javascript代码：

function showImage(file_id,id_img)
{
    var data = new ImagePreview( $$(file_id), $$(id_img), {
     maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
    });
    data .img.src = ImagePreview.TRANSPARENT;
    data .file.onchange = function(){ ip.preview(); };    
}

eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 $$,$$B,$$A,$$F,$$D,$$E,$$CE,$$S;(3(1K){4 O,B,A,F,D,E,CE,S;O=3(id){5"2f"==1L id?G.getElementById(id):id};O.emptyFunction=3(){};O.extend=3(Q,13,1v){9(1v===1K)1v=14;J(4 R x 13){9(1v||!(R x Q)){Q[R]=13[R]}}5 Q};O.deepextend=3(Q,13){J(4 R x 13){4 1j=13[R];9(Q===1j)continue;9(1L 1j==="c"){Q[R]=M.callee(Q[R]||{},1j)}N{Q[R]=1j}}5 Q};O.wrapper=3(me,15){4 1M=3(){me.T(Z,M)};4 1N=3(){};1N.17=15.17;1M.17=new 1N;5 1M};B=(3(U){4 b={18:/18/.P(U)&&!/1O/.P(U),1O:/1O/.P(U),2h:/webkit/.P(U)&&!/1P/.P(U),2i:/2i/.P(U),1P:/1P/.P(U)};4 1w="";J(4 i x b){9(b[i]){1w="2h"==i?"1k":i;1Q}}b.1k=1w&&1R("(?:"+1w+")[\\\\/: ]([\\\\d.]+)").P(U)?1R.$1:"0";b.ie=b.18;b.2j=b.18&&1T(b.1k,10)==6;b.ie7=b.18&&1T(b.1k,10)==7;b.2k=b.18&&1T(b.1k,10)==8;5 b})(1U.navigator.userAgent.toLowerCase());A=3(){4 p={isArray:3(2l){5 Object.17.toString.19(2l)==="[c 1V]"},1x:3(K,W,l){9(K.1x){5 1y(l)?K.1x(W):K.1x(W,l)}N{4 V=K.1l;l=1y(l)?0:l<0?1z.2m(l)+V:1z.2n(l);J(;l=V-1?V-1:l<0?1z.2m(l)+V:1z.2n(l);J(;l>-1;l--){9(K[l]===W)5 l}5-1}}};3 11(c,u){9(1K===c.1l){J(4 o x c){9(y===u(c[o],o,c))1Q}}N{J(4 i=0,V=c.1l;i,[],174,'|||function|var|return||||if|||object|||type|elem|element||event|style|from|handler||name|ret|left|node||thisp|callback|guid|cusevents|in|false||||events||||document|rect|handlers|for|array|top|arguments|else||test|destination|property||apply|ua|len|elt|right|bottom|this||each|opacity|source|true|parent||prototype|msie|call|slice|args|doc|body|curStyle|value|addEvent|removeEvent||copy|version|length|fixEvent|defaultView|null|elems|width|height|fix|relatedTarget||override|vMark|indexOf|isNaN|Math|lastIndexOf|filter|fun|getScrollTop|getScrollLeft|currentStyle|rtStyle|related|handleEvent|returnValue|undefined|typeof|ins|subclass|opera|chrome|break|RegExp||parseInt|window|Array|contains|offsetWidth|offsetHeight|sLeft|sTop|alpha|camelize|setStyle|repair|position|visibility|display|storage||addEventListener|delete|srcElement|stopPropagation|preventDefault|string||safari|firefox|ie6|ie8|obj|ceil|floor|forEach|push|item|method|concat|ownerDocument|documentElement|scrollTop|scrollLeft|compareDocumentPosition|getBoundingClientRect|getComputedStyle|100|float|styleFloat||rsLeft|replace|cssShow|9999px|cssBack|mouseover|mouseout|fixhandler|removeEventListener|letter'.split('|'),0,{}))

 

 

 

var ImagePreview = function(file, img, options) {
    
    this.file = $$(file);//文件对象

    this.img = $$(img);//预览图片对象

    
    this._preload = null;//预载图片对象

    this._data = "";//图像数据

    this._upload = null;//remote模式使用的上传文件对象

    
    var opt = this._setOptions(options);
    
    this.action = opt.action;
    this.timeout = opt.timeout;
    this.ratio = opt.ratio;
    this.maxWidth = opt.maxWidth;
    this.maxHeight = opt.maxHeight;
    
    this.onCheck = opt.onCheck;
    this.onShow = opt.onShow;
    this.onErr = opt.onErr;
    
    //设置数据获取程序

    this._getData = this._getDataFun(opt.mode);
    //设置预览显示程序

    this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;
};
//根据浏览器获取模式

ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
    $$B.firefox ? "domfile" :
    $$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
//透明图片

ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
    "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

ImagePreview.prototype = {
  //设置默认属性

  _setOptions: function(options) {
    this.options = {//默认值

        mode:        ImagePreview.MODE,//预览模式

        ratio:        0,//自定义比例

        maxWidth:    0,//缩略图宽度

        maxHeight:    0,//缩略图高度

        onCheck:    function(){},//预览检测时执行

        onShow:        function(){},//预览图片时执行

        onErr:        function(){},//预览错误时执行

        //以下在remote模式时有效

        action:        undefined,//设置action

        timeout:    0//设置超时(0为不设置)

    };
    return $$.extend(this.options, options || {});
  },
  //开始预览

  preview: function() {
    if ( this.file && false !== this.onCheck() ) {
        this._preview( this._getData() );
    }
  },
  
  //根据mode返回数据获取程序

  _getDataFun: function(mode) {
    switch (mode) {
        case "filter" :
            return this._filterData;
        case "domfile" :
            return this._domfileData;
        case "remote" :
            return this._remoteData;
        case "simple" :
        default :
            return this._simpleData;
    }
  },
  //滤镜数据获取程序

  _filterData: function() {
    this.file.select();
    try{
        return document.selection.createRange().text;
    } finally { document.selection.empty(); }
  },
  //domfile数据获取程序

  _domfileData: function() {
    return this.file.files[0].getAsDataURL();
  },
  //远程数据获取程序

  _remoteData: function() {
    this._setUpload();
    this._upload && this._upload.upload();
  },
  //一般数据获取程序

  _simpleData: function() {
    return this.file.value;
  },
  
  //设置remote模式的上传文件对象

  _setUpload: function() {
    if ( !this._upload && this.action !== undefined && typeof QuickUpload === "function" ) {
        var oThis = this;
        this._upload = new QuickUpload(this.file, {
            onReady: function(){
                this.action = oThis.action; this.timeout = oThis.timeout;
                var parameter = this.parameter;
                parameter.ratio = oThis.ratio;
                parameter.width = oThis.maxWidth;
                parameter.height = oThis.maxHeight;
            },
            onFinish: function(iframe){
                try{
                    oThis._preview( iframe.contentWindow.document.body.innerHTML );
                }catch(e){ oThis._error("remote error"); }
            },
            onTimeout: function(){ oThis._error("timeout error"); }
        });
    }
  },
  
  //预览程序

  _preview: function(data) {
    //空值或相同的值不执行显示

    if ( !!data && data !== this._data ) {
        this._data = data; this._show();
    }
  },
  
  //设置一般预载图片对象

  _simplePreload: function() {
    if ( !this._preload ) {
        var preload = this._preload = new Image(), oThis = this,
            onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
        this._onload = function(){ this.onload = null; onload.call(this); }
        preload.onload = $$B.ie ? this._onload : onload;
        preload.onerror = function(){ oThis._error(); };
    } else if ( $$B.ie ) {
        this._preload.onload = this._onload;
    }
  },
  //一般显示

  _simpleShow: function() {
    this._simplePreload();
    this._preload.src = this._data;
  },
  
  //设置滤镜预载图片对象

  _filterPreload: function() {
    if ( !this._preload ) {
        var preload = this._preload = document.createElement("div");
        //隐藏并设置滤镜

        $$D.setStyle( preload, {
            width: "1px", height: "1px",
            visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
        });
        //插入body

        var body = document.body; body.insertBefore( preload, body.childNodes[0] );
    }
  },
  //滤镜显示

  _filterShow: function() {
    this._filterPreload();
    var preload = this._preload,
        data = this._data.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
    try{
        preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
    }catch(e){ this._error("filter error"); return; }
    //设置滤镜并显示

 

 

//设置滤镜并显示

    this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
    this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );
  },
  
  //显示预览

  _imgShow: function(src, width, height) {
    var img = this.img, style = img.style,
        ratio = Math.max( 0, this.ratio ) || Math.min( 1,
                Math.max( 0, this.maxWidth ) / width || 1,
                Math.max( 0, this.maxHeight ) / height || 1
            );
    //设置预览尺寸

    style.width = Math.round( width * ratio ) + "px";
    style.height = Math.round( height * ratio ) + "px";
    //设置src

    img.src = src;
    this.onShow();
  },
  
  //销毁程序

  dispose: function() {
    //销毁上传文件对象

    if ( this._upload ) {
        this._upload.dispose(); this._upload = null;
    }
    //销毁预载图片对象

    if ( this._preload ) {
        var preload = this._preload, parent = preload.parentNode;
        this._preload = preload.onload = preload.onerror = null;
        parent && parent.removeChild(preload);
    }
    //销毁相关对象

    this.file = this.img = null;
  },
  //出错

  _error: function(err) {
    this.onErr(err);
  }
}