fileupload图片预览功能

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 复制代码

时间: 2024-10-23 08:44:07

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

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

实现图片预览功能

本来以为图片预览功能非常的简单,就是在file标签change时获取路径展示给用户,但是浏览器处于安全考虑并不会让脚本获得绝对路径(这会在一定程度上暴露用户的文件 目录),只能获取文件名.所以要通过和后台的配合,在file标签发生change事件时,将图片以ajax的方式发送到后台,后台将图片保存在服务器,然后讲文件地址返回回来,再由前端展示给用户,完成预览功能! 文件的ajax并不是太容易,所以使用了jquery的插件,jquery.form.js.一些参数性问题可以参考form插件. <fo

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

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

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v

使用ivx实现图片预览功能的经验总结

在实际案例中经常会需要展示一个图片列表,但是列表中由于图片数量比较多,所以每张图片都会比较小.这时我们需要一个功能,能够点击某一张图片就显示这张图片的大图,今天就是说一下ivx中如何实现这种预览效果. 1.图片列表demo中的图片列表是用循环组件创建的,图片资源已经存放在对象数组里,for容器下的图片组件已经绑定了当前数据中的图片资源.父容器是一个行并且开启了自动换行,每行显示两张图片.2.小图与大图上面循环创建出来的就是小图,我们还需要用一个大的图片组件来显示我们点击后的大图.这里使用了一个横

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

小程序实现图片预览功能

var current = e.target.dataset.src; //预览图片 wx.previewImage({ current: current, urls: this.data.product.photoUrls, }); current:表示当前需要预览的图片,(默认图片数组的第一张) urls:表示图片的数组 当然你需要在页面绑定事件 <image mode="widthFix" data-src="{{item}}" src="{{