图片上传界面优化

浏览数：23 / 时间：2015年06月09日

选择图片 html代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="css/StyleSheet.css" />
    <link type="text/css" rel="Stylesheet" href="css/divRound.css" />

    <script type="text/javascript" src="js/JScript.js"></script>

    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
    //选择图片事件
    $("#addfile").click(function(){
        $("#FileUpload1").click();    
    
    });
    
    //上传按钮事件
    $("#upload").click(function(){    
        $("#btn_upload").click();    
    });   
    
    });   
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td style="vertical-align: top; width: 10%;">
                    <asp:Image ID="Image1" ImageUrl="~/images/null.gif" Width="150px" Height="150px"
                        runat="server" />
                </td>
                <td>
                    <asp:FileUpload ID="FileUpload1" runat="server" ForeColor="#fff" Width="1px" Height="1px"
                        Visible="true" />
                    <a href="#">
                        <div class="loadfile" id="addfile">
                            选择图片
                        </div>
                    </a><a href="#">
                        <div class="loadfile" id="upload">
                            确定上传
                        </div>
                    </a>
                    <asp:Button ID="btn_upload" runat="server" Text="上传" CssClass="btnUpload" OnClick="btn_Onclick"
                        Width="1px" Height="1px" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <iframe src="Default.aspx" width="100%" height="300px" frameborder="0"></iframe>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <div style="position: relative; float: right;">
                        <asp:Button ID="btn_ok" runat="server" Text="确定" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button
                            ID="btn_no" runat="server" Text="取消" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

后台代码：

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO;
using System.Xml.Linq;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            var ctrl = Request.Params[Page.postEventSourceID];
            var args = Request.Params[Page.postEventArgumentID];

            OnchangeHandle(ctrl, args);
        }
    }

    /// <summary>
    /// 绑定文件选择变更事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Init(object sender, EventArgs e)
    {
        this.FileUpload1.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.FileUpload1, "onchange"));
    }

    /// <summary>
    /// 文件选择变更事件
    /// </summary>
    /// <param name="ctrl"></param>
    /// <param name="args"></param>
    private void OnchangeHandle(string ctrl, string args)
    {
        if (this.FileUpload1.HasFile)
        {
            string photoName1 = this.FileUpload1.FileName; //获取初始文件名
            int i = photoName1.LastIndexOf("."); //取得文件名中最后一个"."的索引
            string newext = photoName1.Substring(i).ToLower(); //获取文件扩展名
            if (newext != ".gif" && newext != ".jpg" && newext != ".jpeg" && newext != ".bmp" && newext != ".png")
            {

                //第一种  
                Response.Write("<script language=javascript>alert(‘抱歉，图片格式不正确，请重新选择！‘);</" + "script>");
        

              
            }
            else
            {
                if (ctrl == this.FileUpload1.UniqueID && args == "onchange")
                {
                    this.Image1.Visible = true;

                    Session["UploadBytes"] = this.FileUpload1.FileBytes;

                    this.Image1.ImageUrl = "~/Class1.axd";


                }
            }
        }
    }
  

    /// <summary>
    /// 上传按钮事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void btn_Onclick(object sender, EventArgs e)
    {
        //建立存储的目录
        string directory = "Myfiles/";

        //判断目录是否存在
        if (!Directory.Exists(Server.MapPath(directory)))
        {
            //如果不存在，创建它
            Directory.CreateDirectory(Server.MapPath(directory));
        }

        //新文件
        string newFile = Server.MapPath(directory + Guid.NewGuid().ToString() + ".jpg");


        if ((Session["UploadBytes"]) != null)
        {
            byte[] buffer = (byte[])(Session["UploadBytes"]);

            File.WriteAllBytes(newFile, buffer);
        }
        if (Session["ImgList"] != null)
        {
            string tempStr = Session["ImgList"].ToString();
            tempStr += newFile + ";";
            Session["ImgList"] = tempStr;
        }
        else
        {
            Session["ImgList"] = newFile+";";
        }
    }


}

图片展示前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 type="text/css" rel="Stylesheet" href="css/StyleSheet.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <% if (imgStr != null)
           {
               for (int i = 0; i < imgStr.Length; i++)
               { %>
        <div class="imgItem">
            <div class="imgView_img">
                <asp:Image ID="img" runat="server" Width="100%" Height="100%" BorderStyle="None"
                    BorderWidth="0" ImageUrl="<%imgStr[i] %>" />
            </div>
            <div>
                <asp:RadioButton ID="rdoBtn" runat="server" GroupName="rdo" Text="封面" CssClass="imgView_btn" /><asp:LinkButton
                    CssClass="imgView_btn" runat="server" ID="likBtn" Text="删除"></asp:LinkButton></div>
        </div>
        <%}
           } %>
    </div>
    </form>
</body>
</html>

divRound.css：

.raised{background:transparent;width:150px;}
.raised h1,.raised p{margin:0 10px;}
.raised h1{font-size:30px;color:#fff; text-align:center}
.raised p{padding-bottom:0.5em;}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;overflow:hidden;font-size:1px;}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}
.raised .b2{background:#f60;border-left:1px solid #fff;border-right:1px solid #eee;}
.raised .b3{background:#f60;border-left:1px solid #fff;border-right:1px solid #ddd;}
.raised .b4{background:#f60;border-left:1px solid #fff;border-right:1px solid #aaa;}
.raised .b4b{background:#f60;border-left:1px solid #eee;border-right:1px solid #999;}
.raised .b3b{background:#f60;border-left:1px solid #ddd;border-right:1px solid #999;}
.raised .b2b{background:#f60;border-left:1px solid #aaa;border-right:1px solid #999;}
.raised .b1{margin:0 5px;background:#fff;}
.raised .b2, .raised .b2b{margin:0 3px;border-width:0 2px;}
.raised .b3, .raised .b3b{margin:0 2px;}
.raised .b4, .raised .b4b{height:2px; margin:0 1px;}
.raised .b1b{margin:0 5px; background:#999;}
.raised .boxcontent{display:block;background:#f60;border-left:1px solid #fff;border-right:1px solid #999;}



/** 实例

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>


**/

StyleSheet.css

body
{
}
.loadfile
{
    background-color: #f60;
    width: 100px;
    position: relative;
    float: left;
    margin-left: 40px;
    height: 40px;
    line-height: 40px;
    top: 50px;
    color: #fff;
    font-size: 20px;
    font-family: Microsoft YaHei;
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); /*ie*/
    -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/
    box-shadow: 2px 2px 10px #909090; /*opera或ie9*/
}
.btnUpload
{
    position: absolute;
    top: -10px;
}
.divshadow
{
    
}

.container
{
    background-color: #333;
}
.imgView_btn
{
    position: relative;
    float: left;
    margin-left: 20px;
    font-size: 15px;
    margin-top: 5px;
}
.imgView_img
{
 border:0px;
}
.imgItem
{
    width: 150px;
    height: 180px;
    margin-left: 20px;
    margin-top:20px;
    position: relative;
    float: left;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#000,direction=120,strength=4); /*ie*/
    -moz-box-shadow: 2px 2px 10px #000; /*firefox*/
    -webkit-box-shadow: 2px 2px 10px #000; /*safari或chrome*/
    box-shadow: 2px 2px 10px #000; /*opera或ie9*/
}