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

迈不过友情╰ 2022-04-10 08:28 239阅读 0赞

看看效果：

[![fileupload_preivew.gif][]][fileupload_preivew.gif 1]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<% @ 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客户端事件。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 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中配置一下。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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版下测试时，它会出现下面异常：  
[![28036-20160216135835845-1444387894.png][]][28036-20160216135835845-1444387894.png 1]  
  
  
它会出现一个异常：  
[![28036-20160216135914845-9784009.png][]][28036-20160216135914845-9784009.png 1]  
  
  
解决这个问题，你可以尝试下面的步骤来进行：  
[![28036-20160216140007486-2038347879.png][]][28036-20160216140007486-2038347879.png 1]

把**Integrated**改为**Classic**：  
  
[![28036-20160216140040032-499678781.png][]][28036-20160216140040032-499678781.png 1]

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

[![28036-20160216140818470-1794449094.png][]][28036-20160216140818470-1794449094.png 1]

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

[fileupload_preivew.gif]: /images/20220401/ac1d3798689e4142bf3429bd1d81ef97.png
[fileupload_preivew.gif 1]: http://images.cnblogs.com/cnblogs_com/insus/fileupload_preivew.gif
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220401/123112fdf68342e8b082b8326c471fc6.png
[28036-20160216135835845-1444387894.png]: /images/20220401/91ced1d2d4aa4fadac22f780931ddd85.png
[28036-20160216135835845-1444387894.png 1]: http://images2015.cnblogs.com/blog/28036/201602/28036-20160216135835845-1444387894.png
[28036-20160216135914845-9784009.png]: /images/20220401/0b0b5a35636045c087d419f521064332.png
[28036-20160216135914845-9784009.png 1]: http://images2015.cnblogs.com/blog/28036/201602/28036-20160216135914845-9784009.png
[28036-20160216140007486-2038347879.png]: /images/20220401/4df78b37f58f48c8aac021ba7160eea8.png
[28036-20160216140007486-2038347879.png 1]: http://images2015.cnblogs.com/blog/28036/201602/28036-20160216140007486-2038347879.png
[28036-20160216140040032-499678781.png]: /images/20220401/829bde458faa43ccbdec4055d57fd457.png
[28036-20160216140040032-499678781.png 1]: http://images2015.cnblogs.com/blog/28036/201602/28036-20160216140040032-499678781.png
[28036-20160216140818470-1794449094.png]: /images/20220401/67c194e03d594a0cbc299b0c87d7bfb3.png
[28036-20160216140818470-1794449094.png 1]: http://images2015.cnblogs.com/blog/28036/201602/28036-20160216140818470-1794449094.png
[http_download.cnblogs.com_insus_ASPDOTNET_AxdDemo.rar]: http://download.cnblogs.com/insus/ASPDOTNET/AxdDemo.rar