ASP.NET - .net file upload into server with uploaded percentage

Asked By Naveed Mohammed on 13-Nov-11 10:50 PM
can any one tell me how to i show uploading file this much is upload and balance is this much like percentage

Thanks 
Younus
Jitendra Faye replied to Naveed Mohammed on 13-Nov-11 11:00 PM
Follow these steps-


Downloading.png



The upload widget includes the following:

  • File Upload interface (Default.aspx)
    • IFRAME (which contains upload engine page UploadEngine.aspx)
    • Upload button (that will allow user to upload file on server)
    • Display statistics for uploading file (Filename, Status, Progress and Transferred Bytes)
    • Grid (that will display list of uploaded files)
    • Hidden field (it will monitor and refresh file list whenever file was successfully uploaded on server)
  • Upload Engine (UploadEngine.aspx)
    • File Upload control

Page Structure (Default.aspx)

PageStructure.png

Upload Engine structure (UploadEngine.aspx)

UploadEngineStructure_.png

Page execution flow

During page loading, it will automatically register click event for Upload button.

PageExecutionFlow_1.png
  1. Choose File to upload
  2. Clicking on Upload button (it will automatically register click event for Upload button)
    • The following function is checking basic validation on client site like
      • File Upload should not be empty
      • File name should be unique
    • Executing (UploadEngine) submit event using JavaScript
    • During execution of (UploadEngine) two processes are executing simultaneously
      • Page will maintain File Upload details in session with the help of UploadDetail class
      • Every 500 milliseconds, the PageMethod will call and display progress of current uploading file with Size and Percentage value
    • Display continuous progress using StartProgress function

    3. PageExecutionFlow_2.png

  3. Display real time progress

    PageExecutionFlow_3.png

  4. Update message based on result, result may from following:
    Success Information Warning Error

    PageExecutionFlow_4.png

  5. The two processes are executing simultaneously on server side are as follows:
    • Upload Engine

      ProcessesExecution_1_.png

    • Default

      ProcessesExecution_2.png

  6. During file upload processes, the following screen would be appear:

    Downloading.png

  7. Following functionality is also available in Grid:

    Delete_DownloadFile.png



Suchit shah replied to Naveed Mohammed on 14-Nov-11 12:25 AM
Here are the quick tutorial for that task

http://ajaxuploader.com/
http://www.codeproject.com/KB/webforms/FileUploadWithProgrss.aspx
http://www.codeproject.com/KB/aspnet/FlashUpload.aspx