选择图片 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; 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="确定" /> <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*/ }