fileupload图片预览功能
FileUpload上传图片前首先预览一下
看看效果：
在专案中，创建aspx页面，拉上FileUpload控件一个Image，将用来预览上传时的图片。
<!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客户端事件。
{
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中配置一下。
<system.web>
<httpHandlers>
<add verb="*" path="PreviewImage.axd" type="Insus.NET.ImageProcessFactory"/>
</httpHandlers>
</system.web>
</configuration>
Ok，我们回到aspx.cs页面中，要在page_Load中，怎监控FileUpload控件是否有值变化：
{
if (IsPostBack)
{
var ctrl = Request.Params[Page.postEventSourceID];
var args = Request.Params[Page.postEventArgumentID];
OnchangeHandle(ctrl, args);
}
}
在Page_Load中有一个方法OnchangeHandle(xxx,xxx):
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" ; } }
fileupload图片预览功能的更多相关文章
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- HTML5实现图片预览功能
两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JavaScript图片上传前的图片预览功能
JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...
- 34)django-上传文件,图片预览功能实现
目录 文件上传 1)form表单提交上传(会刷新) 2)ajax上传 3)iframe 4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ext图片预览功能实现，前端代码
效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...
随机推荐
- 用STM32CubeMX创建FreeRTOS项目
1. 目标, PG13,PG14双线程双闪灯. 2. 测试平台 stm32f429i-disco keil v5.13.0.0 CubeMx 4.8.0 3. 步骤 3.1 打开cube, PG13, ...
- libevent源码分析：time-test例子
time-test例子是libevent自带的一个例子,通过libevent提供的定时事件来实现,间隔固定时间打印的功能. /* * gcc -g -o time-test time-test.c - ...
- ABAP宏--Macros
定义语法 DEFINE macro. ... &1 ... &9 ... END-OF-DEFINITION. 调用语法: macro [p1 p2 ... ]. 最多时能有9参数 例 ...
- ubuntu安装py27 spyder
sudo apt-get install python-qt4 python-sphinx sudo pip install spyder sudo pip install -U spyder 一般网 ...
- 8.mvc core上传文件
以下方法均是个人,仅供参考 public interface IFileHelper { /// <summary> /// 保存文件 (返回 Test.jpg) 出错就返回 error| ...
- html5悬浮球效果
自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq ...
- JSP Filter用法
1.filter的作用 在HttpServletRequest请求到达Servlet之前,拦截客户的HttpServletRequest 根据需要检查HttpServletRequest的相关信息,修 ...
- xib的UIScrollView自适应高度
1.首先,我们先把这个size classes关了(需要使用的童鞋无视掉,也无视掉我的工程名,这是我弄高德地图创建的工程) 2.添加一个scrollview上去,设置上下左右约束为0 3.然后搞一个v ...
- php变量赋值给js
1 2 3 4 5 6 7 8 $(document).ready(function(){ <?php $f="'name'"?> ...
- R：incomplete final line found by readTableHeader on
报错: In read.table("abc.txt", header = T) : incomplete final line found by readTableHead ...