Home > Developer > JavaScript
Jquery Uploadify upload progress bar
This article mainly introduces a simple example of Jquery Uploadify upload with a progress bar. If you need some help, please refer to it.
The Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "UpLoad. aspx. cs" Inherits = "UploadifyDemo_UpLoad" %>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1" runat = "server">
<Title> Jquery Uploadify upload progress bar </title>
<Link href = "js/jquery. uploadify-v2.1.4/uploadify.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript" src = "js/jquery. uploadify-v2.1.4/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. uploadify-v2.1.4/swfobject. js"> </script>
<Script type = "text/javascript" src = "js/jquery. uploadify-v2.1.4/jquery. uploadify. v2.1.4.min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Uploadify"). uploadify ({
'Upload': 'js/jquery. uploadify-v2.1.4/uploadify.swf ', // path of the uploadify.swf File
'Script': 'uploadhandler. ashx', // path of the background script for processing file uploads
'Cancelim': 'js/jquery. uploadify-v2.1.4/cancel.png ',
'Folder': 'uploadfile/<% = subpathName %> ', // path of the upload folder
'Queueid': 'filequeue ', // id of the element you want to use as a file queue on the page
'Auto': false, // automatic upload when a file is added to the queue
'Multi ': true, // if it is set to true, multi-File Upload is allowed.
'Fileext ':' *. jpg; *. gif; *. png ', // specifies the suffix of the file to be uploaded.
'Filedesc': 'web Image Files (. JPG,. GIF,. PNG) ', // text displayed in the file type drop-down menu at the bottom of the browser window
'Sizelimmit ': 102400, // size limit of the file to be uploaded, measured in 100 KB
'Oncancel': function (event, ID, fileObj, data) {// triggered once each file is removed from the upload queue
Alert ('the upload of '+ fileObj. name + 'has been canceled! ');
},
'Oncomplete': function (event, ID, fileObj, response, data) {// triggered every time a file is uploaded
Alert ('there are '+ data. fileCount + 'files remaining in the queue .');
},
'Onallcomplete': function (event, data) {// triggered when all files in the upload queue are uploaded
Alert (data. filesUploaded + 'files uploaded successfully! ');
}
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
</Div>
</Form>
<Div id = "fileQueue"> </div>
<Input type = "file" name = "uploadify" id = "uploadify"/>
<P>
<A href = "javascript: $ ('# uploadify'). uploadifyUpload ()"> upload </a> |
<A href = "javascript: $ ('# uploadify'). uploadifyClearQueue ()"> cancel upload </a>
</P>
</Body>
</Html>
The Code is as follows:
<% @ WebHandler Language = "C #" Class = "UploadHandler" %>
Using System;
Using System. Web;
Using System. IO;
Public class UploadHandler: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
Context. Response. Charset = "UTF-8 ";
HttpPostedFile file = context. Request. Files ["Filedata"];
String uploadPath = HttpContext. Current. Server. MapPath (@ context. Request ["folder"]);
If (file! = Null)
{
If (! Directory. Exists (uploadPath ))
{
Directory. CreateDirectory (uploadPath );
}
File. SaveAs (Path. Combine (uploadPath, file. FileName ));
Context. Response. Write ("1 ");
}
Else
{
Context. Response. Write ("0 ");
}
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
