.Net用FileUpload实现图片预览

最新推荐文章于 2019-09-17 23:24:17 发布

置顶 Regan-lin

最新推荐文章于 2019-09-17 23:24:17 发布

阅读量803

点赞数

文章标签： c# .net 图片 updatepanel html

本文链接：https://blog.youkuaiyun.com/u011130289/article/details/38352671

版权

本文介绍了一种使用ASP.NET中的Iframe、UpdatePanel及FileUpload控件实现图片预览的方法，通过具体代码展示了如何在用户上传图片后即时预览图片。

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

.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.youkuaiyun.com/detail/u011130289/6561663