Html代码:
<div>
<asp:FileUpload ID="fuImage" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="上传" onclick="btnUpload_Click" />
</div>
<div class="img_label">
<asp:Image ID="imgUploadImage1" Visible="false" runat="server" style="height:20px;width:20px" />
<asp:Button ID="button_ImgDelete1" runat="server" Text="删除"
onclick="button_ImgDelete1_Click" Visible="false" />
<asp:Image ID="imgUploadImage2" Visible="false" runat="server" style="height:20px;width:20px"/>
<asp:Button ID="button_ImgDelete2" runat="server" Text="删除"
onclick="button_ImgDelete2_Click" Visible="false" />
<asp:Image ID="imgUploadImage3" Visible="false" runat="server" style="height:20px;width:20px"/>
<asp:Button ID="button_ImgDelete3" runat="server" Text="删除"
onclick="button_ImgDelete3_Click" Visible="false" />
</div>
<div id="outerDiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerDiv" style="position:absolute;">
<img id="bigImg" style="border:5px solid #fff;" src="" />
</div>
</div>
Js代码:
$(function () {
/*
* 针对上传文件按钮选择完文件判断是否选择合法文件
*/
$("input[type=file]").change(function () {
var fileName = $(this).val();
var suffixRegExp = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
if (suffixRegExp.test(fileName)) {
$(this).next("img").attr("src", fileName);
}
else {
$(this).val("");
alert("允许上传图片格式:GIF|JPG|GIF|.");
}
});
/*
* 点击图片可以放大进行图片预览,再点击恢复
* 这个功能是从往上看到的,最后理解了
*/
$("img[id*=UploadImage]").click(function () {
$("#bigImg").attr("src", $(this).attr("src")).load(function () {
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight, scale = 0.8;
if (realHeight > windowH * scale) {
imgHeight = windowH * scale;
imgWidth = imgHeight / realHeight * realWidth;
if (imgWidth > windowW * scale) {
imgWidth = windowW * scale;
}
}
else if (realWidth > windowW * scale) {
imgWidth = windowW * scale;
imgHeight = imgWidth / realWidth * realHeight;
}
else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$(this).width(imgWidth);
$(this).height(imgHeight);
var w = (windowW - imgWidth) / 2;
var h = (windowH - imgHeight) / 2;
$("#innerDiv").css({ "top": h, "left": w });
$("#outerDiv").fadeIn("fast");
});
});
/*
* 再次点击放大的图层,使图层消失
*/
$("#outerDiv").click(function () {
$(this).fadeOut("fast");
})
/*
* 点击上传按钮之前需要先判断是否选择了图片,如果选择的图片数量大于3,提示不能继续添加
*/
$(btn_UploadImage).click(function () {
var count = 0;
$("div.img_label img[src*=Upload]").each(function () {
if ($(this).attr("src") != null) {
count++;
}
})
if (count == 3) {
alert("最多添加3张图片,如想继续添加,请先删除图片");
return false;
}
})
}
C#代码:
public partial class ImageUploadControl : System.Web.UI.UserControl
{
private string _relativePath;
private string _value = "$$##";
public string Value
{
get { return _value; }
set { _value = value; }
}
private BmsContextDataContext bcDataCXD = new BmsContextDataContext();
private bool flag = false;//点击上传按钮时,如果给Image赋值,flag置true,说明此次上传结束,上传按钮点击一次只能给一个Image赋值
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Init();
}
}
public void Init()
{
if (!string.IsNullOrEmpty(_value))
{
string[] sep = { "$$##" };
string[] imgList = _value.Split(sep, StringSplitOptions.RemoveEmptyEntries);
foreach (string img in imgList)
{
if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
imgUploadImage1.ImageUrl = img;
imgUploadImage1.Visible = true;
button_ImgDelete1.Visible = true;
}
else if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
imgUploadImage2.ImageUrl = img;
imgUploadImage2.Visible = true;
button_ImgDelete2.Visible = true;
}
else if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage3.ImageUrl = img;
imgUploadImage3.Visible = true;
button_ImgDelete3.Visible = true;
}
}
}
}
public void Save()
{
_value = "$$##";
if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
_value = _value + imgUploadImage1.ImageUrl + "$$##";
}
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
_value = _value + imgUploadImage2.ImageUrl + "$$##";
}
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
_value = _value + imgUploadImage3.ImageUrl + "$$##";
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
//点击上传按钮,将图片加载到第一个未加载图片的Image控件上
_relativePath = this.ImageUpload(fuImage);
_value = "$$##";//每次点击上传按钮,都是对当前控件的状态进行遍历,重新进行组串
if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl) && !flag )
{
//当Image中无url,同时flag为false
imgUploadImage1.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage1.Visible = true;
button_ImgDelete1.Visible = true;
flag = true;
}
else
{
if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
_value = _value + imgUploadImage1.ImageUrl + "$$##";
}
}
if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl) && !flag)
{
imgUploadImage2.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage2.Visible = true;
button_ImgDelete2.Visible = true;
flag = true;
}
else
{
//加if是原因,如果是因为flag为true而进入这个分支,则判断Image的url是否为空
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
_value = _value + imgUploadImage2.ImageUrl + "$$##";
}
}
if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl) && !flag)
{
imgUploadImage3.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage3.Visible = true;
button_ImgDelete3.Visible = true;
flag = true;
}
else
{
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
_value = _value + imgUploadImage3.ImageUrl + "$$##";
}
}
}
private string ImageUpload(FileUpload fileUpload)
{
//如果FileUpload控件中有文件
if (fileUpload.HasFile)
{
string timeStamp = DateTime.Now.Ticks.ToString();//时间戳
string savePath = Server.MapPath("~/Upload/Images");//上传路径
//如果不存在此路径,则创建一个新路径
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
savePath = savePath + "\\" + timeStamp + "_" + fileUpload.FileName;//重组文件名,加上对应的时间戳
fileUpload.SaveAs(savePath);//将图片上传到服务器
return "/Upload/Images/" + timeStamp + "_" + fileUpload.FileName; //返回图片的名称,相对路径的
}
else
{
Utility.Show(this.Page, "未选择图片");
}
return null;
}
protected void button_ImgDelete1_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
imgUploadImage1.ImageUrl = imgUploadImage2.ImageUrl;
}
else
{
imgUploadImage1.ImageUrl = "";
imgUploadImage1.Visible = false;
button_ImgDelete1.Visible = false;
}
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
else
{
imgUploadImage2.ImageUrl = "";
imgUploadImage2.Visible = false;
button_ImgDelete2.Visible = false;
}
}
protected void button_ImgDelete2_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
else
{
imgUploadImage2.ImageUrl = "";
imgUploadImage2.Visible = false;
button_ImgDelete2.Visible = false;
}
}
protected void button_ImgDelete3_Click(object sender, EventArgs e)
{
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
}
希望大家给予更多更好的建议,我会继续做扩展。也希望能有朋友给加上好看的样式,我们一起学习。