星空网 > 软件开发 > ASP.net

上传控件显示缩略图

  在网站程序中,经常会需要进行图片的上传,很多时候我们也需要在选择图片后将选择的图片作为缩略图显示在页面上,可以直接在页面上查看选择的是否是自己想要的图片或图片是否选择错误。以往通常的做法事先将图片上传到网站程序目录中,然后再把图片的网站图径给Image控件。这样做会有个弊端,那就是如果我选择的图怎不是想要的,想重新选择一经图片,那我岂不是要把之前上传的删了。很显示这样有些多此一举。有人可能会问为什么我们在选择图片后不直接把上传控件上的路径给Image控件呢?因为此时你的图片路径是本地路径,比如D:\tupian\test.jpg,如果你直接赋值的话浏览器是不允许的。

  那么我们要如何在上传控件选择图片后,立马将图片显示在页面上呢,在这里我提到一个流的概念,我们可以在网站里写一个imagehandler一般处理程序,这个处理程序是专们向请求方输出图片流。这样我们中要把这个图片流给Image控件就可以了,那么我们具体如何做呢,首先当我选择一个图片后,在上传控件的onchange事件里去改变Image控件的src, 并且让这个src指向这个imagehandler程序,我们需要把本地图片路径地址传给这个handler程序,让handler把图片转换成流返回给Image。好了,具体代码如下:

前台代码:

上传控件显示缩略图上传控件显示缩略图
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="addproduct.aspx.cs" Inherits="WHClimate.WebBack.SubProduct" %> 2  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html ="http://www.w3.org/1999/xhtml"> 5 <head> 6   <title></title> 7   <link rel="stylesheet" type="text/css" href="css/css.css" /> 8   <script language="JavaScript" type="text/javascript"> 9     var patn = /\.(jpg|gif|png|jpeg|dib|jpe|pcx|tiff|tif)$/i;10     function previewLogo(upkind, imgkind) {11       var filelogo = document.getElementById(upkind);12       var imagesrc = document.getElementById(imgkind);13       if (!filelogo || !filelogo.value)14         return;15       if (patn.test(filelogo.value)) {16         imagesrc.src = "ImageHandler.ashx?path=" + filelogo.value;17       }18       else {19         filelogo.outerHTML += "";20         alert("您选择的图像文件格式不正确。");21       }22     }23   </script>24 </head>25 <body onkeydown= "if(event.keycode==13)return false;">26 <form id="form1" runat="server">27     <table width="900" border="0" align="center" cellpadding="8" cellspacing="1" class="table_01">28     <tr>29       <td align="right" class="td_02">30         <strong>图片上传:</strong>31       </td>32       <td class="td_03">33         <input id="fileUpload" type="file" onchange='previewLogo("fileUpload","thumbnail"); ' />34       </td>35     </tr>36 37     <tr>38       <td width="120" align="right" class="td_02">39         <strong>缩略图:</strong>40       </td>41       <td class="td_03">42         <img  src='/images/loading.gif' data-original="" id="thumbnail"  runat="server" width="250" />43       </td>44     </tr>45   </table>46 </form>47 </body>48 </html>

View Code

后台ImageHandler.ashx代码:

上传控件显示缩略图上传控件显示缩略图
 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Drawing; 6 using System.Drawing.Imaging; 7  8 namespace WHClimate.WebBack 9 {10   /// <summary>11   /// Summary description for ImageHandler12   /// </summary>13   public class ImageHandler : IHttpHandler14   {15 16     public void ProcessRequest(HttpContext context)17     {18       string path = context.Request.QueryString.Get("path");19       Image image = Image.FromFile(path);20       context.Response.Clear();21       context.Response.ClearHeaders();22       image.Save(context.Response.OutputStream, ImageFormat.Jpeg);23       context.Response.ContentType = "image/jpeg";24       HttpContext.Current.ApplicationInstance.CompleteRequest();25     }26 27     public bool IsReusable28     {29       get30       {31         return false;32       }33     }34   }35 }

View Code

 





原标题:上传控件显示缩略图

关键词:上传

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

菲律宾物流查询:https://www.goluckyvip.com/tag/96593.html
寄速递到菲律宾:https://www.goluckyvip.com/tag/96594.html
货物寄到菲律宾:https://www.goluckyvip.com/tag/96595.html
去菲律宾的空运货运:https://www.goluckyvip.com/tag/96596.html
到菲律宾的货运:https://www.goluckyvip.com/tag/96597.html
空运菲律宾专线:https://www.goluckyvip.com/tag/96599.html
独家丨B站广告位可跳转美团APP B站为电商平台引流再升级 :https://www.kjdsnews.com/a/1836410.html
百崖大峡谷生态旅游景区(探秘中国西南自然风光):https://www.vstour.cn/a/363176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流