上传控件显示缩略图

Posted 2020-07-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上传控件显示缩略图相关的知识，希望对你有一定的参考价值。

　　在网站程序中，经常会需要进行图片的上传，很多时候我们也需要在选择图片后将选择的图片作为缩略图显示在页面上，可以直接在页面上查看选择的是否是自己想要的图片或图片是否选择错误。以往通常的做法事先将图片上传到网站程序目录中，然后再把图片的网站图径给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 xmlns="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 alt="暂未图片显示" src=""  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 ImageHandler
12     /// </summary>
13     public class ImageHandler : IHttpHandler
14     {
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 IsReusable
28         {
29             get
30             {
31                 return false;
32             }
33         }
34     }
35 }

View Code

以上是关于上传控件显示缩略图的主要内容，如果未能解决你的问题，请参考以下文章

如何显示 youtube 视频缩略图

C#listView控件如何获得缩略图的URL,并把缩略图在另个窗体中显示为大图？跪求啊！！！！