asp:FileUpload的高级应用一(在选择完需要上传的图片后,能在页面够及时地预览到该图片)

来源:互联网 发布:ubuntu如何安装exe 编辑:程序博客网 时间:2024/06/09 20:04

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"  Inherits="Files_Default" %>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="../CSS/Default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        function display(abc) {


            var imgLogo = document.getElementById("imgLogo");
            if (imgLogo != null) {
                imgLogo.style.display = "none";
            }


            var id1 = document.getElementById("id1");
            id1.innerHTML = '<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src=\'' + abc.value + '\'); width:120px; height:95px; display:inline; border="0" id="zbc" aid="dd" alt="" />';
        }
    </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
        <div class="co_right01">
           
        </div>
        <div class="co_right02">
            <div class="bb9">
                <div class="bb2">
                    <div class="bb1">
                        <div class="bb3">
                            <div class="bb10">
                                <div class="ftit">
                                </div>
                                <div class="fmore2">
                                </div>
                            </div>
                            <!-- 表开始 -->
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab8">
                                <tr runat="server" id="TR_LogoImg">
                                    <td class="bggg" style="height: 108px" runat="server" id="TD_LogoImg">
                                        公司图标:
                                    </td>
                                    <td class="bggg2">
                                        <img id="imgLogo" runat="server" src="" alt="公司图标" style="width: 120px; height: 95px;
                                            border: 0;" /><span id="id1"></span>&nbsp;<asp:FileUpload ID="fuLogo" runat="server" onchange="display(this)" />
                                        (大小不要超过1M)
                                    </td>
                                </tr>
                            </table>
                            <!-- 表结束 -->
                            <div class="bbrab">
                            </div>
                        </div>
                    </div>
                </div>
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td width="15" valign="top" height="10">
                            <div class="bb5">
                            </div>
                        </td>
                        <td width="100%" valign="top">
                            <div class="bb6">
                            </div>
                        </td>
                        <td width="14" valign="top">
                            <div class="bb7">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
实例效果:
一、选择图片:


二、打开后:


原创粉丝点击