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刪除。

猜您在找 FileUpload上傳圖片前首先預覽一下 asp.net fileupload控件上傳圖片並預覽圖片 FileUpload控件預覽圖片 js上傳圖片前預覽方法（支持預覽多個圖片） HTML5 jQuery圖片上傳前預覽 jquery實現圖片上傳前的預覽 EXTJS圖片上傳預覽(含本地上傳前預覽和服務器圖片預覽) 利用FileReader實現上傳圖片前本地預覽圖片上傳前預覽、壓縮、轉blob、轉formData等操作 FileReader與URL.createObjectURL實現圖片、視頻上傳前預覽