Jquery Uploadify uplobs a simple instance with a progress bar

  • 2020-03-30 01:44:05
  • OfStack

<%@ 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 the 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 () {
                'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //Path to the uploadify.swf file
                'script': 'UploadHandler.ashx', //Path to the background script that handles file uploads
                'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
                'folder': 'UploadFile/<% = subpathName %>', //The path to the upload folder
                'queueID': 'fileQueue', //On the page, the id of the element you want to use as a file queue
                'auto': false, //When files are added to the queue, they are automatically uploaded
                'multi': true, //Setting this to true will allow multiple file uploads
                'fileExt': '*.jpg;*.gif;*.png', //Allows uploading of file suffixes
                'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //The text displayed in the file type drop-down menu at the bottom of the browse window
                'sizeLimit': 102400,  //The size limit for uploaded files is 100k bytes
                'onCancel': function (event, ID, fileObj, data) { //Triggers every time a 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!');
    <form id="form1" runat="server">


    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
        <a href="javascript:$('#uploadify').uploadifyUpload()"> upload </a>| 
        <a href="javascript:$('#uploadify').uploadifyClearQueue()"> Cancel the upload </a>

<%@ 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))
            file.SaveAs(Path.Combine(uploadPath, file.FileName));
    public bool IsReusable
            return false;

Related articles: