选择图片 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="确定" /> <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*/
}
时间： 2024-08-28 03:26:49