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

看看效果：

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

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

按 Ctrl+C 复制代码

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

按 Ctrl+C 复制代码

为能应用到axd文档，需要在Web.Config中配置一下。

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

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

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

按 Ctrl+C 复制代码

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

按 Ctrl+C 复制代码

fileupload图片预览功能的更多相关文章

  1. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  3. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  4. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  7. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  8. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. ext图片预览功能实现，前端代码

    效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...

随机推荐

  1. 【POJ2886】Who Gets the Most Candies?-线段树+反素数

    Time Limit: 5000MS Memory Limit: 131072K Case Time Limit: 2000MS Description N children are sitting ...

  2. 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  3. Linux下安装GO语言环境

    在/root/downloads/下 wget -c https://storage.googleapis.com/golang/go1.7.1.linux-amd64.tar.gz 解压文件至/us ...

  4. SQL Join的一些总结

    1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接.外联接和交叉联接等.如果我们想在两个或以上的表获取其中从一个表中的行与另一个表中的行匹配的 ...

  5. Python的SublimeText开发环境配置

    1.完成Python的默认安装之后要设置环境变量,系统环境变量Path中加入Python的安装目录";C:/Python27" 2.配置Python编译环境,修改[C:\Progr ...

  6. JS高级程序设计 笔记

    1.instanceof 可以判断实例是否在某个对象的原型上: function A() { this.a = "a"; } function B() { this.b = &qu ...

  7. CSS下拉列表错误纠正

    上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...

  8. 命令行用sublime打开当前目录

    执行    ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" subl 就可以在命令行用 ...

  9. Eclipse 实现关键字自动补全功能

    一般默认情况下,Eclipse ,MyEclipse 的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选项是默认关闭的, ...

  10. 你的指纹还安全吗？ - BlackHat 2015 黑帽大会总结 day 2

    你的指纹还安全吗?  0x03 FINGERPRINTS ON MOBILE DEVICES: ABUSING AND LEAKING speaker是来自FireEye的Wei Tao和Zhang ...