FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:42:00

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà)):看看效果：在專案中，創(chuàng)建aspx頁(yè)面，拉上FileUpload控件一個(gè)Image，將用來(lái)預(yù)覽上傳時(shí)的圖片。代碼如下:View Code <%@ Page Language=C# AutoEventWireup=true CodeFile=Default2.aspx.cs Inherits=De

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà)):看看效果：在專案中，創(chuàng)建aspx頁(yè)面，拉上FileUpload控件一個(gè)Image，將用來(lái)預(yù)覽上傳時(shí)的圖片。代碼如下:View Code <%@ Page Language=C# AutoEventWireup=true CodeFile=Default2.aspx.cs Inherits=De

看看效果：

在專案中，創(chuàng)建aspx頁(yè)面，拉上FileUpload控件一個(gè)Image，將用來(lái)預(yù)覽上傳時(shí)的圖片。
代碼如下:


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>預(yù)覽</legend> 
<asp:Image ID="Image1" runat="server" Visible="false" /> 
</fieldset> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 
 
在Page_Init事件中，為FileUpload控件，注冊(cè)onchange客戶端事件。 
 代碼如下:
protected void Page_Init(object sender, EventArgs e) 
{ 
this.FileUpload1.Attributes.Add("onchange", Page.ClientScript.GetPostBackEventReference(this.FileUpload1, "onchange")); 
} 
 
接下來(lái)，Insus.NET一個(gè)axd處理文檔，其實(shí)ImageProcessFactory.cs只是一個(gè)普能的類(lèi)別，只實(shí)作了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; 
} 
} 
} 
} 
 
為能能應(yīng)到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頁(yè)面中，要在page_Load中，怎監(jiān)控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中有一個(gè)方法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" ; 
} 
} 

 
 




聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖片 upload fileupload

熱門(mén)焦點(diǎn)

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

FileUpload上傳圖片前實(shí)現(xiàn)圖片預(yù)覽功能(附演示動(dòng)畫(huà))

最新推薦

猜你喜歡

熱門(mén)推薦