图片上传预览效果实现（有刷新和无刷新）

最新推荐文章于 2024-01-25 16:11:47 发布

笨妞妞

最新推荐文章于 2024-01-25 16:11:47 发布

阅读量3.1k

点赞数

分类专栏：效果实现文章标签： textbox server 照片 class div asp

本文链接：https://blog.youkuaiyun.com/daidailiuhome/article/details/6203998

版权

效果实现专栏收录该内容

23 篇文章

订阅专栏

这是一个关于如何在网页中实现实现图片上传并进行预览的教程。使用ASP.NET和JavaScript，包括文件上传、图片预览、裁剪功能以及上传后的图片处理。用户可以选择图片，预览并裁剪为合适的头像，最后保存裁剪后的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoadUserPhoto.aspx.cs" Inherits="UpLoadUserPhoto" %><!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 href="css/main.css" mce_href="css/main.css" type="text/css" rel="Stylesheet" /> <mce:script type="text/javascript" src="js/jquery1.2.6.pack.js" mce_src="js/jquery1.2.6.pack.js"></mce:script> <mce:script type="text/javascript" src="js/ui.core.packed.js" mce_src="js/ui.core.packed.js"></mce:script> <mce:script type="text/javascript" src="js/ui.draggable.packed.js" mce_src="js/ui.draggable.packed.js"></mce:script> <mce:script type="text/javascript" src="js/CutPic.js" mce_src="js/CutPic.js"></mce:script> <mce:script type="text/javascript"></mce:script></head><body> <form id="form1" runat="server"> <%--div布局成两部分：左侧和右侧。--%> <%--Step1 进入界面左侧显示的是“当前照片” --%> <%--Step2 当在右侧点击上传按钮以后，“当前图片”显示的是“裁切头像照片” --%> <%--Step3 当点击保存图像按钮后，显示的是“当前照片” --%> <div> <div class="left"> <%--Step1 左侧当前照片--%> <div id="CurruntPicContainer"> <div class="title"> <b>当前照片</b></div> <div class="photocontainer"> <asp:Image ID="imgphoto" runat="server" ImageUrl="~/图片上传预览截取保存/image/man.GIF" /> </div> </div> <%--Step2 裁切头像照片--%> <div id="Step2Container"> <div class="title"> <b>裁切头像照片</b> </div> <div class="uploadtooltip"> 您可以拖动照片以裁剪满意的头像 </div> <div id="Canvas" class="uploaddiv"> <div id="ImageDragContainer"> <asp:Image ID="ImageDrag" runat="server" ImageUrl="~/图片上传预览截取保存/image/blank.jpg" CssClass="imagePhoto" ToolTip="" /> </div> <div id="IconContainer"> <asp:Image ID="ImageIcon" runat="server" ImageUrl="~/图片上传预览截取保存/image/blank.jpg" CssClass="imagePhoto" ToolTip="" /> </div> </div> <%--放大缩小的滚动条--%> <div class="uploaddiv"> <table> <tr> <td id="Min"> <img alt="缩小" src="image/_c.gif" mce_src="image/_c.gif" οnmοuseοver="this.src='image/_c.gif';" οnmοuseοut="this.src='image/_h.gif';" id="moresmall" class="smallbig" /> </td> <td> <div id="bar"> <div class="child"> </div> </div> </td> <td id="Max"> <img alt="放大" src="image/c.gif" mce_src="image/c.gif" οnmοuseοver="this.src='image/c.gif';" οnmοuseοut="this.src='image/h.gif';" id="morebig" class="smallbig" /> </td> </tr> </table> </div> <%--保存按钮及照片抓取的属性值显示--%> <div class="uploaddiv"> <asp:Button ID="btn_Image" runat="server" Text="保存头像" OnClick="btn_Image_Click" /> </div> <div> 图片实际宽度： <asp:TextBox ID="txt_width" runat="server" Text="1"></asp:TextBox><br /> 图片实际高度： <asp:TextBox ID="txt_height" runat="server" Text="1"></asp:TextBox><br /> 距离顶部： <asp:TextBox ID="txt_top" runat="server" Text="82"></asp:TextBox><br /> 距离左边： <asp:TextBox ID="txt_left" runat="server" Text="73"></asp:TextBox><br /> 截取框的宽： <asp:TextBox ID="txt_DropWidth" runat="server" Text="120"></asp:TextBox><br /> 截取框的高： <asp:TextBox ID="txt_DropHeight" runat="server" Text="120"></asp:TextBox><br /> 放大倍数： <asp:TextBox ID="txt_Zoom" runat="server"></asp:TextBox> </div> </div> </div> <%--Step1 右侧更换照片--%> <div id="Step1Container"> <div class="title"> <b>更换照片</b></div> <div id="uploadcontainer"> <div class="uploadtooltip"> 请选择新的照片文件，文件需小于2.5MB</div> <div class="uploaddiv"> <asp:FileUpload ID="fuPhoto" runat="server" ToolTip="选择照片" /></div> <div class="uploaddiv"> <asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" /> <a href="#" mce_href="#" οnclick="Upload();">上传</a> </div> <div class="uploaddiv"> <asp:Button ID="Sure" runat="server" Text="确定" OnClick="Sure_Click" /> <a href="#" mce_href="#" οnclick="Sure();">确定</a> <asp:Button ID="Cancel" runat="server" Text="取消" OnClick="Cancel_Click" /> <a href="#" mce_href="#" οnclick="Cancel();">取消</a> </div> </div> </div> </div> <input type="hidden" runat="server" id="pathOne" /> <input type="hidden" runat="server" id="pathTwo" /> <input type="hidden" runat="server" id="incon" /> </form></body></html>

后台页面：

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.IO;using ZoomImageDemo;using Ajax;using System.Xml;using System.Net;public partial class UpLoadUserPhoto : BasePage{ private string path = string.Empty; //修改前照片保存路径 private string savePath = string.Empty; //修改后照片保存路径 private string saveName = string.Empty; //修改后照片保存名称 protected void Page_Load(object sender, EventArgs e) { incon.Value = this.connStr; Ajax.Utility.RegisterTypeForAjax(typeof(UpLoadUserPhoto)); if (Page.IsPostBack) { return; } //点击上传后重新加载本页面 if(!string.IsNullOrEmpty(Request.QueryString["Imgurl"])) { this.ImageDrag.ImageUrl = Request.QueryString["Imgurl"].ToString(); this.ImageIcon.ImageUrl = Request.QueryString["Imgurl"].ToString(); Page.ClientScript.RegisterStartupScript(typeof(UpLoadUserPhoto), "Step2", "<mce:script type='text/javascript'></mce:script>"); } else //第一次加载本页面 { Page.ClientScript.RegisterStartupScript(typeof(UpLoadUserPhoto), "Step1", "<mce:script type='text/javascript'></mce:script>"); this.pathOne.Value = this.imgphoto.ImageUrl; } } protected void btnUpload_Click(object sender, EventArgs e) { if (this.fuPhoto.PostedFile.FileName.Length == 0) //获取客户端上的文件的完全限定名称 { Response.Write("<mce:script type="text/javascript"></mce:script>"); return; } string ext = System.IO.Path.GetExtension(this.fuPhoto.PostedFile.FileName).ToLower(); //返回指定的路径字符串的扩展名 if (ext != ".jpg" && ext != ".jepg" && ext != ".bmp" && ext != ".gif") { Response.Write("<mce:script type="text/javascript"></mce:script>"); return; } path = "~/图片上传预览截取保存/UploadPhoto/" + DateTime.Now.ToString("yyyyMMddhhmmss") + ext; this.fuPhoto.PostedFile.SaveAs(Server.MapPath(path)); //保存上载文件的内容 Response.Redirect("UpLoadUserPhoto.aspx?Imgurl=" + Server.UrlEncode(path)); } [Ajax.AjaxMethod] //前台保存方法 public string UploadFile(string filePath, string enm) { string strpath = "~/图片上传预览截取保存/UploadPhoto/" + DateTime.Now.ToString("yyyyMMddhhmmss") + "." + enm; string SaveUrl = Server.MapPath(strpath);//上传到什么位置 WebClient myWebClient = new WebClient();//创建WebClient实例 myWebClient.Credentials = CredentialCache.DefaultCredentials;//得到网络凭据 FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.Read); BinaryReader r = new BinaryReader(fs); byte[] postArray = r.ReadBytes((int)fs.Length); Stream postStream = myWebClient.OpenWrite(SaveUrl, "PUT"); postStream.Write(postArray, 0, postArray.Length); postStream.Close(); return Server.UrlEncode(strpath); } protected void btn_Image_Click(object sender, EventArgs e) { int imageWidth = Int32.Parse(txt_width.Text); int imageHeight = Int32.Parse(txt_height.Text); int cutTop = Int32.Parse(txt_top.Text); int cutLeft = Int32.Parse(txt_left.Text); int dropWidth = Int32.Parse(txt_DropWidth.Text); int dropHeight = Int32.Parse(txt_DropHeight.Text); savePath = "User/UserHeadImage/"; saveName = CutPhotoHelp.SaveCutPic(Server.MapPath(ImageIcon.ImageUrl), Server.MapPath(savePath), 0, 0, dropWidth, dropHeight, cutLeft, cutTop, imageWidth, imageHeight); this.imgphoto.ImageUrl = savePath + saveName; this.pathTwo.Value = this.imgphoto.ImageUrl; Page.ClientScript.RegisterStartupScript(typeof(UpLoadUserPhoto), "step3", "<mce:script type='text/javascript'></mce:script>"); } protected void Sure_Click(object sender, EventArgs e) { Response.Write("<mce:script type="text/javascript"></mce:script>"); //A页面通过window.open()打开B页面，则A页面所在窗口就是B页面的opener，在B页面通过opener对象可以访问A页面。 Response.Write("<mce:script type="text/javascript"></mce:script>"); //此处是指调用A页面的GetUrl()方法 } protected void Cancel_Click(object sender, EventArgs e) { Response.Write("<mce:script type="text/javascript"></mce:script>"); }}