Based on the jquery plug-in Uploadify realizes the real-time display progress bar uploads the picture _jquery

Understand Uploadify First, the details are as follows

Uploadify is a simple and easy-to-use multiple file upload scheme. As a jquery plug-in, Uploadify is easy to use and highly customizable.

Uploadify Features:

Uploadify is simply a file upload plugin based on jquery. Its functional features are summarized as follows:

1, support single file or multiple file upload, can control the number of concurrent uploaded files
2, on the server side to support the use of various languages, such as Php,.net,java ...
3, through the parameters can be configured to upload file types and size limits
4), through the parameter can configure whether to select files automatically uploaded
5), easy to extend, can control the callback function of each step (onselect, OnCancel ...). ）
6), through the interface parameters and CSS control appearance
7, provide upload progress of the event callback, real-time display upload progress
8, before beginning to download the plug-in installation package to the local and reference, detailed implementation please see code comments, the following start code.

1, HTML code

<div id= "Webapplogo_file" style= "display:block; width:800px; Background-color: #fff; " > <ul> <li style= "MARGIN-LEFT:213PX;" ><span class= "Black_blod14" >logo icon:</span></li> <li style= "MARGIN-LEFT:3PX;" > <input type= "text" readonly= "readonly" id= "Text_webapplogo" name= "App_logo" class= "appipt1" value= "&LT;%=APPL" Ogo%> "/></li> <li style=" PADDING-TOP:1PX; > <input type= "file" id= "Webapplogo" name= "Webapplogo"/> </li> <li><span style= "disp Lay:none; margin-left:5px; padding-left:20px;
     Color: #EA5200; font-size:12px; Background:url (' images/icon_03.gif ') no-repeat 0px 0px; "id= Textporapplogo" > Please upload logo icon! </span></li> <li style= "margin-left:220px;" ><span class= "grey999" style= "margin-left:90px; Float:left; " > Size 72px*72px,png format, it is recommended to use the icon PSD template production </span> <div id= "Qid_webapplogo" class= "Filequeue" ></div&gt ;
     <table id= "Webapplogo_tab" width= "50%" border= "0" cellspacing= "0" cellpadding= "0" align= "center" class= "GRE y999 "style=" display:none; margin-left:90px; Float:left; " > <tr> <td align= "center" valign= "Bottom" > <br/> (64*64) </td> &LT;TD align= "center" valign= "Bottom" > <br/> (48*48) </td> &LT;TD align= "center" valign= "Bottom" > <br/> (32*32) </td> &LT;TD align= "center" valign= "Bottom" > <br/> (16*16) </TD> </tr> </table> </li> </ul> </div>
 

2, JavaScript code (key section)

$ ("#webApplogo"). Uploadify ({' Uploader ': ' js/uploadify-v2.1.4/uploadify.swf ',//progress bar, Uploadify contains ' script ': ' Upload Applogo.ashx ',//General processing program ' cancelimg ': ' js/uploadify-v2.1.4/cancel.png ',//Cancel Picture path ' folder ': ' Imagelogo ',//Upload folder name ' aut O ': true,//file added to upload queue, automatically uploaded. Default is False ' multi ': false,//whether to allow multiple file uploads. The default is False ' Fileext ': ' *.gif;*.jpg;*.jpeg;*.png ',//allowed file types to be uploaded, using semicolons (";)" split for example: *.jpg;*.gif, default null (all file types) ' Filedesc ': ' No more than 2M pictures (*.gif;*.jpg;*.png) ', ' sizelimit ': 2048000,//Allow uploaded file size (KB) This is 2M ' onselectonce ': function (event,data) {//In When a single or multiple file is uploaded, selecting the file triggers the//event event object,//data the selected action information//data.filesselected Select the number of files selected in the file Operation $ (' #s 
   Tatus-message '). Text (data.filesselected + ' file is waiting to upload ... ');
    }, ' OnComplete ': function (event, Queueid, Fileobj, response, data) {//When a single file is uploaded and triggered//event: event object ID: The file is uniquely represented in the file queue//fileobj: The object of the selected file, the list of attributes he contains//response: server-side returned response text, where I return the processed file name//data: File queue details and file upload general data ALert ("File:" + Fileobj.name +) upload success!
    ");
    Set Picture name $ ("#applogo"). attr ("value", response);
    Set the value of the input box $ ("#text_webApplogo"). attr ("value", fileobj.name);
    Set Picture path $ ("#img_64"). attr ("src", "imagelogo/64_" +response);
    $ ("#img_48"). attr ("src", "imagelogo/48_" +response);
    $ ("#img_32"). attr ("src", "imagelogo/32_" +response);
    $ ("#img_16"). attr ("src", "imagelogo/16_" +response);
   When the picture path setting is complete, display the picture $ ("#webApplogo_tab"). CSS ("Display", "block"); }, ' OnError ': function (event, Queueid, fileobj) {//When a single file is out of error triggering alert ("File: + fileobj.name +" Upload failed!)
   "); }, ' buttonimg ': ' images/bn_04.gif ',//browse button's picture path ' width ': 60,//browse button's width and height ' height ': ' Queueid ': ' Qid_webapplogo '//page

 The ID of the element on the face as the file upload queue);

3, server-side process file Upload

<summary>///upload file///</summary> public class Uploadapplogo:ihttphandler {System.Drawing.Image Image, Image64, image48, Image32, Image16;
  Defines an object for the image class protected string imagepath;//picture path protected string imagetype;//picture type protected string imagename;//picture name  Protected string filename;//Picture name//provides a callback method that determines when an image object will be canceled in advance when performing a build thumbnail operation//If this method determines that the Getthumbnailimage method should stop early, then return

  true; otherwise return false System.Drawing.Image.GetThumbnailImageAbort callb = null; public void ProcessRequest (HttpContext context) {context.
   Response.ContentType = "Text/plain"; Httppostedfile uploadimage = context.
   request.files["Filedata"]; Physical path String Uploadpath = HttpContext.Current.Server.MapPath (context.

   request["folder" + "\ \"); if (uploadimage!= null) {//whether there is a directory, if not, create if (!)
    Directory.Exists (Uploadpath)) {directory.createdirectory (Uploadpath);
    }//Client file Full name string filename = Uploadimage.filename; string extname = filename. SubString (filename.
    LastIndexOf (".") + 1); To not repeat, set filename filename = Guid.NewGuid ().

    ToString () + "." + Extname; Context.
    Response.Write ("1"); Context.
   Response.Write (FileName); } else {context.
   Response.Write ("0");   

   } string MPath;
   ImagePath = Uploadimage.filename;
   Get picture Type ImageType = Imagepath.substring (Imagepath.lastindexof (".") + 1);
   Get picture Name imagename = imagepath.substring (Imagepath.lastindexof ("\") + 1); Stream imgstream = uploadimage.inputstream;//stream file, ready to read the contents of the uploaded file int imglen = uploadimage.contentlength;//upload file size//build virtual Path MPath = HttpContext.Current.Server.MapPath (context.
   request["folder"]);
   Save to Virtual path Uploadimage.saveas (MPath + "\" + fileName);
   Display original//imagesource.imageurl = "upfile/" + imagename;

   Create a reference image for the uploaded image = System.Drawing.Image.FromFile (MPath + "\" + fileName); Generate thumbnail image64 = image.
   Getthumbnailimage (CALLB, New System.IntPtr ()); Saves the thumbnail to the specified virtual path image64. Save (HTTPCOntext. Current.Server.MapPath (context.
   request["folder"]) + "\\64_" + fileName); Frees the resource image64 for the Image64 object.

   Dispose (); Generate thumbnail image48 = image.
   Getthumbnailimage (CALLB, New System.IntPtr ()); Image48. Save (HttpContext.Current.Server.MapPath context.
   request["folder"]) + "\\48_" + fileName); Image48.

   Dispose (); Generate thumbnail image32 = image.
   Getthumbnailimage (CALLB, New System.IntPtr ()); Image32. Save (HttpContext.Current.Server.MapPath context.
   request["folder"]) + "\\32_" + fileName); Image32.

   Dispose (); Generate thumbnail Image16 = image.
   Getthumbnailimage (CALLB, New System.IntPtr ()); Image16. Save (HttpContext.Current.Server.MapPath context.
   request["folder"]) + "\\16_" + fileName); Image16.

   Dispose (); Releases the resource image occupied by the image object.
  Dispose ();
   public bool IsReusable {get {return false;

 }
  }
 }

4, the effect is as follows

For more highlights, please click on the "jquery Upload operation Summary" for in-depth study and research.

The above is the entire content of this article, I hope to help you learn.