Upload Control display thumbnail image

Last Update:2016-05-20 Source: Internet

Author: User

Tags httpcontext

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the website program, often will need to upload pictures, many times we also need to select pictures after the selection of images as thumbnails displayed on the page, you can directly on the page to see whether you want the picture or picture is the choice of error. In the past, the usual practice of uploading images to the site program directory, and then the image of the site map to the image control. This will have a disadvantage, that is, if I choose the diagram is not want, want to re-select once the picture, then I would like to delete the previous upload. It shows that there are some superfluous. One might ask why we don't just give the image control a path on the upload control after selecting the image. Because your picture path is a local path at this point, such as D:\tupian\test.jpg, the browser is not allowed if you assign a value directly.

So how do we choose a picture in the upload control, immediately display the picture on the page, here I mention a concept of flow, we can write a ImageHandler general handler on the website, this handler is dedicated to the requester to output the picture stream. So we want to stream this image to the image control, then how do we do it, first when I select a picture, in the onchange event of the upload control to change the image control SRC, and let this src point to the ImageHandler program, We need to pass the local image path address to the handler program and let handler convert the image to stream and return it to image. Okay, here's the code:

Front Code:

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 <HTMLxmlns= "http://www.w3.org/1999/xhtml">5 <Head>6     <title></title>7     <Linkrel= "stylesheet"type= "Text/css"href= "Css/css.css" />8     <Scriptlanguage= "JavaScript"type= "Text/javascript">9         varPatn= /\. (jpg|gif|png|jpeg|dib|jpe|pcx|tiff|tif) $/i;Ten         functionPreviewlogo (Upkind, imgkind) { One             varFilelogo=document.getElementById (upkind); A             varimagesrc=document.getElementById (imgkind); -             if (!Filelogo|| !filelogo.value) -                 return; the             if(Patn.test (Filelogo.value)) { - imagesrc.src= "imagehandler.ashx?path=" +Filelogo.value; -             } -             Else { + filelogo.outerhtml+= ""; - Alert ("The image file you have selected is not in the correct format. "); +             } A         } at     </Script> - </Head> - <Bodyonkeydown= "if (event.keycode==13) return false;"> -  <formID= "Form1"runat= "Server"> -          <Tablewidth= "The "Border= "0"Align= "Center"cellpadding= "8"cellspacing= "1"class= "Table_01"> -         <TR> in             <TDAlign= "Right"class= "Td_02"> -                 <Strong>Image upload:</Strong> to             </TD> +             <TDclass= "Td_03"> -                 <inputID= "FileUpload"type= "File"onchange= ' Previewlogo ("fileUpload", "thumbnail");'/> the             </TD> *         </TR> $ Panax Notoginseng         <TR> -             <TDwidth= "+"Align= "Right"class= "Td_02"> the                 <Strong>Thumbnail Image:</Strong> +             </TD> A             <TDclass= "Td_03"> the                 <imgalt= "No picture displayed"src=""ID= "thumbnail"runat= "Server"width= "+"  /> +             </TD> -         </TR> $     </Table> $ </form> - </Body> - </HTML>

View Code

Background IMAGEHANDLER.ASHX Code:

1 usingSystem;2 usingSystem.Collections.Generic;3 usingSystem.Linq;4 usingsystem.web;5 usingSystem.Drawing;6 usingSystem.Drawing.Imaging;7 8 namespaceWhclimate.webback9 {Ten     /// <summary> One     ///Summary description for ImageHandler A     /// </summary> -      Public classImagehandler:ihttphandler -     { the  -          Public voidProcessRequest (HttpContext context) -         { -             stringPath = context. Request.QueryString.Get ("Path"); +Image image =image.fromfile (path); - context. Response.Clear (); + context. Response.ClearHeaders (); A image. Save (context. Response.outputstream, imageformat.jpeg); atContext. Response.ContentType ="Image/jpeg"; - HttpContext.Current.ApplicationInstance.CompleteRequest (); -         } -  -          Public BOOLisreusable -         { in             Get -             { to                 return false; +             } -         } the     } *}

View Code

Upload Control display thumbnail image

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More