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

复制代码 代码如下:

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" ;
}
}

时间: 2024-10-01 14:12:49

FileUpload上传图片前实现图片预览功能(附演示动画)_实用技巧的相关文章

JS上传图片前实现图片预览效果的方法

 这篇文章主要介绍了JS上传图片前实现图片预览效果的方法,涉及javascript操作图片的技巧,需要的朋友可以参考下     本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns=&quo

JS上传图片前实现图片预览效果的方法_javascript技巧

本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)_Android

本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能.分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果.效果图如下: 1.GridView 首先,自定义一个GridImageAdapter图片适配器

input file上传 图片预览功能实例代码_javascript技巧

input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

带有图片预览功能的上传表单完整HTML

  带有图片预览功能的上传表单,完整的HTML代码如下所示 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>带有图片预览功能的上传表单webjx.com</title> <script> functionviewmypic(mypic,imgfile){ if(imgfi

win7系统找不到图片预览功能的解决方法

  win7系统找不到图片预览功能的解决方法 1.不管设置什么视图模式,或者有没有打开预览功能.都是看不到预览效果的; 2.首先,打开计算机,或者随便一个文件夹,点击:工具-文件夹选项; 3. 点击查看栏,然后会看到很多功能复选框的.一般来说,这样设置后,视图模式设置为大图标或者超大图标可以预览了; 4.如果不是大图标或者越大图标的话,打开预览窗口也是可以看到; 5.有些朋友反映说不行,如果没效果的话,那有可能是你的系统盘空间不足造成的; 另外,如果你想在中等图标.平铺及内容视图下也可以预览的话

如何通过js实现图片预览功能【附实例代码】_javascript技巧

实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

轻松实现js图片预览功能_javascript技巧

本文实例讲述了js实现图片预览的方法,自己以前写的一个,代码比较简洁,分享给大家供大家参考.具体如下: 一.效果预览 效果图: 二.实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js图片预览功能</title> <script language=java

手机图片预览插件photoswipe.js使用总结_javascript技巧

手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览.  资源包:photoswipe-3.0.5 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分android手机上,滑动一次的时候,会跳转2张图片  (正常情况下,滑动一次,跳转1张图片)  通常使用方法如下:  在html的head标签中依次加载资源包中如下文件: <script type="text/javascript" src=&qu