FileUpload上传图片前实现图片预览功能(附演示动画)
更新时间:2021年9月22日 10:17 点击:1355
看看效果:
在专案中,创建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" ;
}
}
在专案中,创建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" ;
}
}
相关文章
- 我们在php中上传文件就必须使用#_FILE变量了,这个自动全局变量 $_FILES 从 PHP 4.1.0 版本开始被支持。在这之前,从 4.0.0 版本开始,PHP 支持 $HTTP_POST_FILES 数组。这...2016-11-25
php+jquery Ajax异步上传图片(ajaxSubmit)实例
下面我们一起来看一个php+jquery Ajax异步上传图片(ajaxSubmit)实例,这个我们真正的利用了ajax而不是使用iframe之类的哦。 效果如下 ...2016-11-25- 这篇文章主要为大家详细介绍了vue实现上传图片添加水印,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-13
- 用PHP给上传图片加水印的程序是通过判定文件类型建立图形,然后把其复制到原建立的图形上,填充并建立rectangle,以备写入imagestring()或是原已经定好的图像程序当中判定水...2016-11-25
- 这篇文章主要介绍了PHP上传图片时判断上传文件是否为可用图片的方法,涉及php针对图片的后缀检测操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-11-01
【帝国CMS插件】帝国CMS7.0图集批量上传插件 批量上传图片
帝国CMS的图集上传一直是很蛋疼的事情。 猪先飞网以前发布过一款 图集批量上传插件 ,但可惜只支持6.6版。不支持7.0版。 而帝国CMS7.0版自2013年03月份发布以来,一直没有人放...2015-12-30ajaxFileUpload插件,C#返回Json数据报错问题的解决方案
这篇文章主要介绍了ajaxFileUpload插件,C#返回Json数据报错的解决方案,需要的朋友可以参考下...2020-06-25- /* array getimagesize ( string $filename [, array &$imageinfo ] ) getimagesize()函数将确定任何给定的图像大小的文件,并返回随着文件类型和高度/宽度的文本字符串...2016-11-25
- 这篇文章主要介绍了c#上传图片,并将地址保存到数据库中的简单实例,有需要的朋友可以参考一下...2021-09-22
asp.net fileupload控件上传文件与多文件上传
这篇文章主要介绍了asp.net fileupload控件上传文件的方法,fileupload控件多文件上传,以及fileupload上传时实现文件验证的方法,需要的朋友可以参考下...2021-09-22- 我们知道多值字段功能很强大,但不能上传图片确很操蛋,其实改吧改吧就可以了,只是帝国的大大们似乎不太注意这些小细节,只有靠自己来优化了。<script> function domvadd_ffff() {...2015-12-30
- ckeditor编辑器在上传图片或文件时是没有大小限制的,下面我们来给大家介绍两种ckeditor上传图片文件大小限制问题解决办法。 一种可以通过修改PHP.INI配置文件上传...2016-11-25
ASP.NET让FileUpload控件支持浏览自动上传功能的解决方法
这篇文章主要介绍了ASP.NET让FileUpload控件支持浏览自动上传功能的解决方法,很实用的技巧,需要的朋友可以参考下...2021-09-22asp.net FileUpload控件实现文件格式判断与文件大小限制
这篇文章主要介绍了有关asp.net fileupload控件判断文件格式,以及进行文件大小限制的方法,可以在web.config中配置,也可以在.cs文件中实现,需要的朋友参考下...2021-09-22php+ajax实现带进度条的上传图片功能【附demo源码下载】
这篇文章主要介绍了php+ajax实现带进度条的上传图片功能,涉及php文件传输及ajax无刷新提交的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下...2016-10-02node.js使用express-fileupload中间件实现文件上传
本文使用express作为服务端,使用express-fileupload库提供的中间件函数来接受从客户端传来的图片,并将图片作为文件存储在服务端,感兴趣的可以了解一下...2021-07-17- 使用fck的朋友可能会碰这样一个情况就是如果上你的文件名为英文字母是没有任何问题,如果上传的是中文汉字就会出现中文名乱码了,下面我来给大家分析与介绍解决方法。...2016-11-25
- 这篇文章主要介绍了thinkphp3.2实现上传图片的控制器方法,结合实例形式分析了thinkPHP图片文件上传相关的文件类型判断,文件路径及相关属性操作技巧,需要的朋友可以参考下...2016-05-04
- 文件名乱码一般是中文导致的,因为ckeditor使用的是uft8编码如果我们页面使用的是gbk或gb2312就有可能出现乱码问题,解决办法只要对上传文件重命名即可。 打开editor...2016-11-25
- CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作,比如将图片路径写入数据库,图片加水印等等操作。 实现原理:配置CKeditor...2016-09-20