现在的位置: 首页 > 综合 > 正文

解决asp.net中Fileupload上传在IE不同版本下显示图片

2013年10月26日 ⁄ 综合 ⁄ 共 10880字 ⁄ 字号 评论关闭

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>修改设备信息</title>
    <link rel="Stylesheet" href="../CSS/StyleSheet.css" type="text/css" /> 
    <style type="text/css">
     body{ background-color:#f3ffe3; font-size:13px;}
    #tbSetInfo td {height:30px;} 
    .mustget{color:Red;}   
    #preview_wrapper{display:inline-block;width:142px;height:90px;}
    #preview_fake{
    /* 该对象用于在IE下显示预览图片
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
    #preview_size_fake{
    /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);visibility:hidden;}
    #preview{
    /* 该对象用于在FF下显示预览图片
    */width:142px;height:90px;}
    /*Img--2*/
    #preview_wrapper2{display:inline-block;width:142px;height:90px;}
    #preview_fake2{
    /* 该对象用于在IE下显示预览图片
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);}
    #preview_size_fake2{
    /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途
    */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);visibility:hidden;}
    #preview2{
    /* 该对象用于在FF下显示预览图片
    */
    width:142px;height:90px;}
    </style>
    <script type="text/javascript"> 
    function GetfileValue(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("FileUploadAcceptSample");
        if(isIE8){
            onAcceptChange(sender);
        }else if(isIE7)
        { 
            file.select();
            var path=document.selection.createRange().text; 
            document.selection.empty(); 
            document.getElementById("preview").src=path;                                                
        }else if(isIE6){          
            document.getElementById("preview").src=document.getElementById("FileUploadAcceptSample").value;
        }else{   //火狐
            try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            } 
            catch (e) {
                alert('请更改浏览器设置');
                return;
            }

            var fname = document.getElementById("FileUploadAcceptSample").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("preview").src=file.path;
         }
    }
    
    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").src=path;              
        }else if(isIE6){          
            document.getElementById("preview2").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").src=file.path;
         }
    }
</script>
    <script type="text/javascript">
        function onUploadChange(sender){   
    var objPreview = document.getElementById('preview2' );
    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

.value
      objPreview.src =sender.files[0].getAsDataURL();
    }else if( objPreviewFake.filters
    ){
      // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
      //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
     
      // IE7, IE8因安全性问题已无法直接通过 input.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,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );
      objPreview.style.display ='none';
    }
    }

    function onAcceptChange(sender){
    var objPreview = document.getElementById('preview' );
    var objPreviewFake = document.getElementById('preview_fake' );
    var objPreviewSizeFake = document.getElementById('preview_size_fake' );
    if( sender.files &&sender.files[0] ){
      objPreview.style.display ='block';
      objPreview.style.width ='auto';
      objPreview.style.height ='auto';
     
      // Firefox 因安全性问题已无法直接通过input

.value
      objPreview.src =sender.files[0].getAsDataURL();
    }else if( objPreviewFake.filters
    ){
      // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
      //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
     
      // IE7, IE8因安全性问题已无法直接通过 input.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,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );
      objPreview.style.display ='none';
    }
    }

    function onPreviewLoad2(sender)
    {autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}
    function onPreviewLoad(sender)
    {autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}

    function autoSizePreview( objPre, originalWidth, originalHeight){
    var zoomParam = clacImgZoomParam( 150, 105, originalWidth,originalHeight);
    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;
    }
</script>
    </head>
<body>
    <form id="form1" runat="server"> 
    <div id="divbox"></div>
    <div style=" width:100%;">        
        <table cellpadding="0" cellspacing="0" border="0" width="870px" id="tbSetInfo" >
                <tr>
                <td align="center">可接受的取样点</td>
                <td colspan="3">
                    <asp:TextBox ID="txtAcceptSamolePoint" runat="server" TextMode="MultiLine" 
                        Width="324px"></asp:TextBox>                             
                </td>
                <td rowspan="4" colspan="2">                                                          
                    <div id="preview_wrapper" style="padding-left:25px;">
                      <div id="preview_fake">
                        <span>可接受的取样点</span><br />
                        <span>
                        <img id="preview" alt="" title="可接受的取样点(图片说明)" runat="server" /> 
                        <%--<asp:Image ID="Image1" runat="server" ToolTip="可接受的取样点(图片说明)" />--%>
                          <img ID="preview_size_fake" />
                        </span>
                      </div>
                    </div>                                
                </td>
                <td rowspan="4" colspan="2" >
                    <div id="preview_wrapper2">
                      <div id="preview_fake2">    
                      <span>推荐的取样点</span><br />
                        <span>                                
                            <img id="preview2" alt="" title="推荐的取样点(图片说明)" runat="server" />
                            <%--<asp:Image ID="preview2" runat="server" onload="onPreviewLoad2(this)" ToolTip="推荐的取样点(图片说明)" />--%>
                            <img id="preview_size_fake2"/>
                        </span>
                      </div>
                    </div> 
                </td>
             </tr>
             <tr>
                <td colspan="2" align="center">可接受的取样点的图片说明</td>
                <td colspan="3">
                    <asp:FileUpload ID="FileUploadAcceptSample" runat="server" onchange="GetfileValue(this)" />
                </td>
             </tr>
             <tr>
                <td align="center" >推荐的取样点</td>
                <td colspan="4">
                    <asp:TextBox ID="txtRecomSamplepoint" runat="server" Width="324px" 
                        TextMode="MultiLine"></asp:TextBox>   
                </td>
             </tr>
             <tr>
                <td colspan="2" align="center">推荐的取样点的图片说明</td>
                <td colspan="3">
                    <asp:FileUpload ID="FileUploadSamplePoint" runat="server" onchange="GetfileValue2(this)" />
                </td>
             </tr>
             <tr>
                <td align="center">备注</td>
                <td colspan="7">
                    <asp:TextBox ID="txtRemark" runat="server" TextMode="MultiLine" Width="324px"></asp:TextBox>
                </td>
             </tr>
        </table>       
    </div>
    </form>
</body>
</html>

原文:http://hi.baidu.com/duwang1104/blog/item/12fd914a6a89db3308f7ef7a.html

抱歉!评论已关闭.