zoukankan      html  css  js  c++  java
  • fileupload图片预览功能

    FileUpload上传图片前首先预览一下

    看看效果:

    在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片。

    复制代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <table>
    <tr>
    <td style="vertical-align: top; 10%;">
    <fieldset>
    <legend>选择图片</legend>
    <asp:FileUpload ID="FileUpload1" runat="server" />
    </fieldset>
    </td>
    <td style="vertical-align: top; 90%;">
    <fieldset>
    <legend>预览</legend>
    <asp:Image ID="Image1" runat="server" Visible="false" />
    </fieldset>
    </td>
    </tr>
    </table>
    </div>
    </form>
    </body>
    </html>
    复制代码

    在Page_Init事件中,为FileUpload控件,注册onchange客户端事件。

    protected void Page_Init(object sender, EventArgs e)
    {
    this.FileUpload1.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.FileUpload1, "onchange"));
    }

    接下来,Insus.NET创建一个axd处理文档,其实ImageProcessFactory.cs只是一个普通的类别,只实作了IHttpHandler接口。

    按 Ctrl+C 复制代码
    按 Ctrl+C 复制代码

    为能应用到axd文档,需要在Web.Config中配置一下。

    复制代码
    <configuration>
    <system.web>
    <httpHandlers>
    <add verb="*" path="PreviewImage.axd" type="Insus.NET.ImageProcessFactory"/>
    </httpHandlers>
    </system.web>
    </configuration>
    复制代码

    Ok,我们回到aspx.cs页面中,要在page_Load中,怎监控FileUpload控件是否有值变化:

    复制代码
    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);
    }
    }
    复制代码

    在Page_Load中有一个方法OnchangeHandle(xxx,xxx):

    按 Ctrl+C 复制代码
    按 Ctrl+C 复制代码
  • 相关阅读:
    UVa OJ 148 Anagram checker (回文构词检测)
    UVa OJ 134 LoglanA Logical Language (Loglan逻辑语言)
    平面内两条线段的位置关系(相交)判定与交点求解
    UVa OJ 130 Roman Roulette (罗马轮盘赌)
    UVa OJ 135 No Rectangles (没有矩形)
    混合函数继承方式构造函数
    html5基础(第一天)
    js中substr,substring,indexOf,lastIndexOf,split等的用法
    css的textindent属性实现段落第一行缩进
    普通的css普通的描边字
  • 原文地址:https://www.cnblogs.com/pengmincd/p/4019532.html
Copyright © 2011-2022 走看看