图片上传预览

    function Check_FileType()
    {
        var str=document.getElementById("<%=fileLoad.ClientID%>").value;
        if(str!="")
        {
            var pos=str.lastIndexOf(".");
            var lastname=str.substring(pos,str.length);
            if(lastname.toLowerCase()!=".jpg"&&lastname.toLowerCase()!=".gif")
            {
                alert("您上传的文件类型为 "+lastname+"，图片必须为.jpg,.gif 类型");
                return false;
            }
            else
            {
                return true;
            }
        }else
        {
             return true;
        }
    }
  
  
        function onUploadChange(sender){ 
        var objPreview = document.getElementById("<%=preview2.ClientID%>");
        var objPreviewFake = document.getElementById('preview_fake2' );
        var objPreviewSizeFake = document.getElementById('preview_size_fake2' );
        if( sender.files &&sender.files[0] ){
          objPreview.style.display ='block';
          objPreview.style.width ='auto';
          objPreview.style.height ='auto';
        
          // Firefox 因安全性问题已无法直接通过input[file].value
          objPreview.src =sender.files[0].getAsDataURL();
    }else if( objPreviewFake.filters)
    {
      // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
      //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
    
      // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
      sender.select();
      var imgSrc =document.selection.createRange().text;
      objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;
      objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;
      autoSizePreview( objPreviewFake,sender.offsetWidth,sender.offsetHeight );
      objPreview.style.display ='none';
    }
    }

    function autoSizePreview( objPre, originalWidth, originalHeight){
        var zoomParam = clacImgZoomParam(350, 205, 550,550);
        objPre.style.width = zoomParam.width +'px';
        objPre.style.height = zoomParam.height +'px';
        objPre.style.marginTop = zoomParam.top +'px';
        objPre.style.marginLeft = zoomParam.left + 'px';
    }
   
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = { width:width, height:height, top:0, left:0 };
      
        if(width>maxWidth || height>maxHeight ){
         rateWidth = width /maxWidth;
        rateHeight = height /maxHeight;
     
          if( rateWidth > rateHeight){
          param.width =maxWidth;
          param.height = height /rateWidth;
          }else{
          param.width = width /rateHeight;
          param.height =maxHeight;
          }
        }
        param.left = (maxWidth - param.width) / 2;
        param.top = (maxHeight - param.height) /2;
     
        return param;
    }
  
    function GetfileValue2(sender){
        if( !sender.value.match(/.jpg|.gif|.png|.bmp/i)){
          alert('图片格式无效！');
          return false;
        }       
        //判断浏览器类型
        var isIE = (document.all) ? true : false;
        var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
        var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
        var isIE6 = isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);       
       
        var file=document.getElementById("FileUploadSamplePoint");
         if(isIE8){
            onUploadChange(sender);
        }else if(isIE7)
        {
            file.select();
            var path=document.selection.createRange().text;
            document.selection.empty();
            document.getElementById("<%=preview2.ClientID%>").src=path;             
        }else if(isIE6){         
            document.getElementById("<%=preview2.ClientID%>").src=document.getElementById("FileUploadSamplePoint").value;
        }else{   //火狐
            try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            }
            catch (e) {
                alert('请更改浏览器设置');
                return;
            }

            var fname = document.getElementById("FileUploadSamplePoint").value;
            var file = Components.classes["@mozilla.org/file/local;1"]
                .createInstance(Components.interfaces.nsILocalFile);
            try {
                // Back slashes for windows
                file.initWithPath( fname.replace(/\//g, "\\\\") );
            }
            catch(e) {
                if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
                alert('无法加载文件');
                return;
            }
             // alert(file.path); //取得文件路径
             document.getElementById("<%=preview2.ClientID%>").src=file.path;
         }
    }

 

 

css

 <style type="text/css">
        /*Img--2*/
        #preview_wrapper2
        {
            display: inline-block;
            width: 250px;
            height: 250px;
        }
        #preview_fake2
        {
            /* 该对象用于在IE下显示预览图片
    */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
        #preview_size_fake2
        {
            /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途
    */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
            visibility: hidden;
        }
        #preview2
        {
            /* 该对象用于在FF下显示预览图片
    */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
            visibility: hidden;
        }
    </style>

 

显示： <div id="preview_wrapper2" style="padding-top:20px;">
                    <div id="preview_fake2">
                        <span>
                            <img id="preview2" alt="" runat="server" />
                            <img id="preview_size_fake2" />
                        </span>
                    </div>
                </div>