Implement real-time display of progress bar based on Jquery plug-in Uploadify to upload pictures _ jquery

This article describes how to upload images based on the Jquery plug-in Uploadify to display progress bars in real time. For more information, see Uploadify.

Uploadify is an easy-to-use multi-File Upload solution. As a Jquery plugin, Uploadify is easy to use and highly customizable.

Uploadify features:

Uploadify is a file upload plug-in based on Jquery. Its features are summarized as follows:

1) supports single-file or multi-File Upload to control the number of concurrently uploaded files
2) supports the use of various languages on the server, such as PHP,. NET, Java ......
3) You can configure the upload file type and size limits through parameters.
4) You can configure whether to select a file and then upload it automatically through parameters.
5) it is easy to expand and can control the callback function (onSelect, onCancel…) of each step ......)
6) control the appearance through interface parameters and CSS
7) provides Event Callback for the upload progress to display the upload progress in real time.
8) before you start, download the plug-in installation package to your local computer and reference it. For detailed implementation, see the code comments and start the code below.

1. html code

      
 
 
        
  
  
LOGO icon:
        
  
  
 
        
  
  
  
        
  
  
Upload the LOGO icon!
        
  
  
The size is 72px * 72px, in png format. We recommend that you use an icon PSD template.
 
   
 
    
 
     
 
      
 
(64*64)
 
      
 
(48*48)
 
      
 
(32*32)
 
      
 
(16*16)
 
     
 
    
 
   
 
      
 
 
    

2. Javascript code (key part)

$ ("# WebApplogo "). uploadify ({'upload': 'js/uploadify-v2.1.4/uploadify.swf ', // progress bar, Uploadify contains 'script': 'uploadapplogo. ashx', // General handler 'cancelim': 'js/uploadify-v2.1.4/cancel.png ', // cancel the image path 'folder': 'imagelogo ', // The upload folder name is 'auto': true, // The file is automatically uploaded after it is added to the upload queue. The default value is false 'multi ': false, // whether multi-File Upload is allowed. The default value is false 'text ':'*. gif ;*. jpg ;*. jpeg ;*. png ', // specifies the file type that can be uploaded. Use a semicolon (";)" to separate the file types. For example :*. jpg ;*. gif. The default value is null (all file types). 'filedesc': 'image up to 2 MB (*. gif ;*. jpg ;*. png) ', 'sizelimmit': 2048000, // size of the file to be uploaded (kb). This parameter is 2 MB 'onselectonce ': function (event, data) {// when a single file or multiple files are uploaded, the operation information selected by the event object/data is triggered when a file is selected. // the event object. filesSelected select the number of objects in the file operation $ ('# status-message '). text (data. filesSelected + 'the file is waiting for upload ....... ');}, 'Oncomplete': function (event, queueID, fileObj, response, data) {// triggered after a single file is uploaded // event: the event object // ID: the unique representation of the file in the file queue // fileObj: the object of the selected file, which contains the attribute list // response: response text returned by the server. Here I return the processed file name // data: file queue details and general data uploaded by the file alert ("file:" + fileObj. name + "uploaded successfully! "); // Set the image name $ (" # applogo "). attr ("value", response); // set the value of the input box $ ("# text_webApplogo "). attr ("value", fileObj. name); // set the image 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); // After the image path is set, the image $ ("# webApplogo_tab" ).css ("display ", "block") ;}, 'onerror': f Unction (event, queueID, fileObj) {// when a single file upload error occurs, alert ("file:" + fileObj. name + "Upload Failed! ") ;}, 'Buttonimg ': 'images/bn_04.gif', // The image path of the browser button 'width': 60, // the width and height of the browser button 'height ': 24, 'queueid': 'qid _ webApplogo '// the ID of the element used as the file upload queue on the page });

3. The server processes file uploads.

////// Upload a file ///Public class UploadApplogo: IHttpHandler {System. drawing. image image, image64, image48, image32, image16; // defines the image Class Object protected string imagePath; // The Image path protected string imageType; // The image type protected string imageName; // The image name protected string fileName; // The image name // provides a callback method, used to determine when the Image object will be canceled in advance when generating a thumbnail. // if this method determines that the GetThumbnailImage method should be stopped in advance, true is returned. Otherwise, false System is returned. 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) {// check whether a directory exists. if not, create if (! Directory. exists (uploadpath) {Directory. createDirectory (uploadpath);} // The full name of the client file string filename = UploadImage. fileName; string extname = filename. substring (filename. lastIndexOf (". ") + 1); // set the file name fileName = Guid. newGuid (). toString () + ". "+ extname; // context. response. write ("1"); context. response. write (fileName);} else {context. response. write ("0");} string mPath; imagePath = UploadImage. fileName; // obtain the image type imageType = imagePath. substring (imagePath. lastIndexOf (". ") + 1); // obtain the image name imageName = imagePath. substring (imagePath. lastIndexOf ("\") + 1); Stream imgStream = UploadImage. inputStream; // stream file, preparing to read the content of the uploaded file int imgLen = UploadImage. contentLength; // the size of the uploaded file // The Virtual Path mPath = HttpContext. current. server. mapPath (context. request ["folder"]); // save it to the virtual path UploadImage. saveAs (mPath + "\" + fileName); // display the source image // imageSource. imageUrl = "upFile/" + imageName; // creates a reference image = System for the uploaded image. drawing. image. fromFile (mPath + "\" + fileName); // generate a thumbnail image64 = image. getThumbnailImage (64, 64, callb, new System. intPtr (); // Save the thumbnail to the specified virtual path image64.Save (HttpContext. current. server. mapPath (context. request ["folder"]) + "\ 64 _" + fileName); // release the image64.Dispose () resource of the image64 object; // generate the thumbnail image48 = image. getThumbnailImage (48, 48, callb, new System. intPtr (); image48.Save (HttpContext. current. server. mapPath (context. request ["folder"]) + "\ 48 _" + fileName); image48.Dispose (); // generate a thumbnail image32 = image. getThumbnailImage (32, 32, callb, new System. intPtr (); image32.Save (HttpContext. current. server. mapPath (context. request ["folder"]) + "\ 32 _" + fileName); image32.Dispose (); // generate a thumbnail image16 = image. getThumbnailImage (16, 16, callb, new System. intPtr (); image16.Save (HttpContext. current. server. mapPath (context. request ["folder"]) + "\ 16 _" + fileName); image16.Dispose (); // release the resource image occupied by the image object. dispose ();} public bool IsReusable {get {return false ;}}}

4. The results are as follows:

The above is all the content of this article, hoping to help you learn.