FileUpload上傳圖片前首先預覽一下

本文轉載自查看原文 2013-01-26 11:25 5523 asp.net

看看效果：

在專案中，創建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

from:http://www.cnblogs.com/insus/archive/2012/11/13/2768951.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery實現圖片上傳前的預覽 ASP.NET MVC圖片上傳前預覽 hTML5實現表單內的上傳文件框，上傳前預覽圖片，針刷新預覽images common-fileupload上傳圖片並顯示圖片圖片上傳:SWFUpload 圖片上傳前預覽：使用base64 前端圖片預覽，上傳前預覽，兼容IE7、8、9、10、11，Firefox，Chrome js實現FileUpload選擇圖片后預覽功能 getObjectURL 上傳圖片預覽 js上傳圖片預覽 Ajax 上傳圖片並預覽