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

本文转载自查看原文 2012-11-13 22:50 25357 C#/ BinaryWrite/ IHttpHandler/ ProcessRequest/ JavaScript/ HttpContext/ ASP.NET/ onchange/ Web.config/ GetPostBackEventReference/ axd/ FileUpload

看看效果：

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

View Code

<% @ 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; width: 10%;" >
                         < fieldset >
                             < legend >选择图片 </ legend >
                             < asp:FileUpload ID ="FileUpload1" runat ="server" />
                         </ fieldset >
                     </ td >
                     < td style ="vertical-align: top; width: 90%;" >
                         < fieldset >
                             < legend >预览 </ legend >
                             < asp:Image ID ="Image1" runat ="server" Visible ="false" />
                         </ fieldset >
                     </ td >
                 </ tr >
             </ table >
         </ div >
     </ form >
</ body >
</ html >

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

View Code

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接口。

ImageProcessFactory.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;

/// <summary>
/// Summary description for ImageProcessFactory
/// </summary>
namespace Insus.NET
{
     public class ImageProcessFactory : IHttpHandler,IRequiresSessionState
    {
         public ImageProcessFactory()
        {
             //
             // TODO: Add constructor logic here
             //
        }

         public void ProcessRequest(HttpContext context)
        {
             // Checking whether the UploadBytes session variable have anything else not doing anything

             if ((context.Session[ " UploadBytes "]) != null)
            {
                 byte[] buffer = ( byte[])(context.Session[ " UploadBytes "]);
                context.Response.BinaryWrite(buffer);

            }
        }

         public bool IsReusable
        {
             get
            {
                 return false;
            }
        }
    }
}

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

View Code

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

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

View Code

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):

View Code

private void OnchangeHandle( string ctrl, string args)
    {
         if (ctrl == this.FileUpload1.UniqueID && args == " onchange ")
        {
             this.Image1.Visible = true;

            Session[ " UploadBytes "] = this.FileUpload1.FileBytes;
             this.Image1.ImageUrl = " ~/PreviewImage.axd " ;
        }
    }

以下内容于2016-02-16 13:56分添加：
一段时间以来，得到许多网友关注这个功能，但网友在测试时，均不能成功执行。
有几点需要注意的，ImageProcessFactory.cs只是一个普通的类别。而不是一般处理程序。另外在较高的.net版下测试时，它会出现下面异常：

它会出现一个异常：

解决这个问题，你可以尝试下面的步骤来进行：

把Integrated改为Classic：

当你完成上面的修改之后，网站程序文件下会生成一个xml格式的文件vwd.webinfo：

另外Insus.NET再附加最新的写的源程序，可从下面链接下载：
http://download.cnblogs.com/insus/ASPDOTNET/AxdDemo.rar

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 EXTJS图片上传预览(含本地上传前预览和服务器图片预览) 利用FileReader实现上传图片前本地预览图片上传前预览、压缩、转blob、转formData等操作 FileReader与URL.createObjectURL实现图片、视频上传前预览 Asp.net中FileUpload控件实现图片上传并带预览显示 MultipartFile上传图片的写法，记录一下。简单使用fileupload上传图片 angular下H5上传图片（可预览，可多张上传） js上传和预览图片 input上传图片并预览