.Net用FileUpload实现图片预览

本文主要是介绍.Net用FileUpload实现图片预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

.Net实现图片预览的方式有很多，可以用Ajax异步实现；可以用Jquery插件用js代码实现；也可以先把图片以byte[]的方式存储到ViewState,即保存到服务器端，然后预览的时候再获取刚刚存储的信息；这里要演示的是用Iframe+UpdatePanel+FileUpload实现图片预览，

效果图：

下面将用一个项目里的部分代码讲解，Demo我另外上次附件给大家下载；

大家都知道html点击Button控件的时候会触发刷新页面，但是UpdatePanel控件只支持普通的 Post 回发，不支持 multipart/form-data 方式的回发，因此也不支持FileUpload控件，就是说点击的时候刷新了FileUpload控件不能显示出图片，所以我们嵌入个Iframe来嵌套个网页实现显示图片，我们命名这个嵌套的网页为fileloadpage.aspx里面的代码如下：

    string box = ""; protected void Page_Load(object sender, EventArgs e){box = Request.QueryString["box"];}    

protected void btn_Upload_Click(object sender, EventArgs e){//判断图片格式上传图片if (Request.Files[0].ContentLength > 0){string ex = System.IO.Path.GetExtension(Request.Files[0].FileName).ToLower();if (".jpg.gif.png.bmp".Contains(ex)){string pathname = FileupLoadPicture.FileName;string ipath = Server.MapPath("image") + "/" + pathname;string photopath = "image/" + pathname;FileupLoadPicture.SaveAs(ipath);cp.Pic = photopath;}}Response.Write("<script>window.top.CheckImgCss('" +  cp.Pic + "','" + box + "');</script>");}

在主页面上加上：

<td align="left" class="style27"><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate><iframe id="I1" frameborder="0" name="I1" height="32px" src="fileloadpage.aspx?box=img" scrolling="no"></iframe></ContentTemplate></asp:UpdatePanel></td><td align="left" class="style26"><div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:135px; height:153px;" align="center"></div></td>

加载的时候判断时候第一次加载

    protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){pic = cp.Pic;}else pic = cp.Pic;}

这里的cp是我写的一个类是用来存储图片路径的

    private string pic = "image/image1.gif";public string Pic{get { return pic; }set { pic = value; }}

大概的代码和思路就这样，有需要这样要求的可以参考下，如果不是这样的要求的，图片预览还是建议临时存储在服务器直接读取，这样简单方便，下面给这个Demo下载地址链接：

http://download.csdn.net/detail/u011130289/6561663 

这篇关于.Net用FileUpload实现图片预览的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---