[GIIS]JS 图片 Preview

/*********************************************************************************
** File Name      :   Attribute.js
** Copyright (C) 2007 . All Rights Reserved.
** Creator            :    Sammy Song
** Create Date    :    2007-8-3
** Description        :    对Picture的Attribute用下现两段JS来控制Preview
** Version No        :    GIIS1.01QG
**
** Modifier            :
** Modify Date    :
** Modify Log     :    
*********************************************************************************/
function doPreview(ImageWidth, ImageHeight, ClientID)
{   
    var divForm = document.getElementById('PreviewDiv');     
    var divWidth = ImageWidth;//document.getElementById('<%=this.ClientID %>' + '_HiddenImageWidth').value;
    var divHeight = ImageHeight; //document.getElementById('<%=this.ClientID %>'  + '_HiddenImageHeight').value;               
    if((document.body.offsetWidth - event.x) >= divWidth)
     {
      divForm.style.left = document.documentElement.scrollLeft + event.x;
      divForm.style.top = event.y + 15;
     }
    else
     {
      divForm.style.left = document.body.offsetWidth + document.documentElement.scrollLeft - divWidth;
      divForm.style.top = event.y + 15;
     }  
    var Preview = document.getElementById("Preview");
    var PreviewDiv = document.getElementById("PreviewDiv");
    var filePath =  document.getElementById(ClientID + '_FileUploadPicture').value;
    var filePathFromDB =  document.getElementById(ClientID + '_QTextBoxPicturePath').value;
    
    if(filePath.length > 0)
    {  
        Preview.src= filePath;
        PreviewDiv.style.display = "block";
        PreviewDiv.style.width = divWidth;
        PreviewDiv.style.height = divHeight;   
   } 
   else if(filePathFromDB.length > 0)
   {
        if(filePathFromDB.indexOf("Upload") == 0)
        {
            Preview.src= "../" + filePathFromDB;
        }
        else
        {
            Preview.src= filePathFromDB;
        }
        PreviewDiv.style.display = "block";
        PreviewDiv.style.width = divWidth;
        PreviewDiv.style.height = divHeight;   
   }
}
function hide()
{
    document.getElementById('PreviewDiv').style.display = 'none';
}

<script language='javascript' src="UserControls/Attribute.js"></script>

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AttributeControl.ascx.cs"
    Inherits="asp.GIIS.Web.AttributeControl" %>
<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <asp:QDropDownList ID="QDropDownListAttribute" runat="server" IsShowDefault="false">
            </asp:QDropDownList>
            <asp:QTextBox ID="QTextBoxAttribute" runat="server" MaxLength="4000"></asp:QTextBox>
            <asp:QTextBox ID="QTextBoxAreaAttribute" runat="server" TextMode="MultiLine" MaxLength="4000"></asp:QTextBox>
            <asp:Panel ID="PanelPicture" runat="server" Width="100%">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="left">
                            <asp:FileUpload ID="FileUploadPicture" runat="server" ContentEditable = "false"/>
                            <asp:Label ID="LabelRed" ForeColor="red" runat="server"
                                    Text="*"></asp:Label></td>
                        <td>
                            <img onmouseover="doPreview(<%=ImageWidth %>, <%=ImageHeight %>, '<%=this.ClientID %>')"
                                onmouseout="hide()" id="PreviewClick" src="../WscSystem/Images/ViewLocalPicture.gif"
                                style="cursor: hand" title="Preview">
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:FileUpload ID="FileUploadFile" runat="server" ContentEditable = "false"/>
            <asp:Label ForeColor="red" Text="*" ID="LabelRequired" runat="server"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <asp:QLabel ID="QLabelFilePath" runat="server" Text="File:" Visible = "false"></asp:QLabel>
            <asp:QTextBox ID="QTextBoxFilePath" runat="server" BorderStyle="none"  Visible = "false" Width = "80%" MaxLength = "500" ReadOnly = "true"></asp:QTextBox>
            <asp:QLabel ID="QLabelPicturePath" runat="server" Text="Picture:"  Visible = "false"></asp:QLabel>
            <asp:QTextBox ID="QTextBoxPicturePath" runat="server" BorderStyle="none"  Visible = "false" Width = "80%" MaxLength = "500" ReadOnly = "true"></asp:QTextBox>
        </td>
    </tr>
</table>
<div style="position: absolute; display: none" id="PreviewDiv">
    <img id="Preview">
</div>

前台：