asp net multiple file upload with progress bar

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

While the files are being uploaded we want to display the jQuery progress bar. As soon as the upload is complete, we want to display complete message in the progress bar, and it should slowly fade out.

using System.IO;
using System.Web;
namespace Demo
{
public class UploadHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
HttpFileCollection selectedFiles = context.Request.Files;
for (int i = 0; i < selectedFiles.Count; i++)
{
System.Threading.Thread.Sleep(1000);
HttpPostedFile PostedFile = selectedFiles[i];
string FileName = context.Server.MapPath("~/Uploads/"
+ Path.GetFileName(PostedFile.FileName));
PostedFile.SaveAs(FileName);
}
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

WebForm code

<%@ Page Language="C#" AutoEventWireup="true"

<!DOCTYPE html>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$("#btnUpload").click(function (event) {
var files = $("#FileUpload1")[0].files;
var formData = new FormData();
}

var progressbarLabel = $('#progressBar-label');
var progressbarDiv = $('#progressbar');

$.ajax({
method: 'post',
data: formData,
contentType: false,
processData: false,
success: function () {
},
error: function (err) {
}
});

value: false
}).fadeIn(500);
}
});
});
</script>

</head>
<body style="font-family: Arial">
<form id="form1" runat="server">
Select Files :
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
<br /><br />
<input type="button" id="btnUpload" value="Upload Files" />
<br /><br />
<div style="width: 300px">
<div id="progressbar" style="position: relative; display: none">
<span style="position: absolute; left: 35%; top: 20%" id="progressBar-label">
Uploading...
</span>
</div>
</div>
</form>
</body>
</html>

Please note : contentType option should be set to false to tell jQuery to not set any content type header. processData option should also be set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

Рекомендации по теме

Комментарии

Previously working with Jquery was like a nightmare. My feet would go cold. But now its manageable and at ease. Thank you Sir.

ashimbera

Love You!!
For those who can't get off the error: TypeError: $(...)[0] is undefined"
Try using an html file upload instead of an asp:fileuplooad: "<input type="file" name="FileUpload1" id="FileUpload1">

lilHoodRD

After so so many tutorials, you sir are still the best! Thanks!

biljam

Thnk u so much sir... finally i uploaded multiple files without any other tools.. you r really genious

darshandivte

It solved the problem in my project and I learned a lot. Thank you, Sir!

jimchen

Fantastic !!, I used it in a MVC5 proyect with some changes and it works fine.

xXfrancoXx

one very important question. Instead of showing "uploading", how can we show the no of records being uploaded.
For example uploading 12 out of 230 records....then uploading 80 out of 230 records...so on so forth. I have an assignment for this type of requirement.

please help

agastya

Dear Sir, your videos is very clear... I lot of learnt in your videos. Thank you much for creating these videos for us.
I have one question for you sir. If Possible make a videos for downloading file with progress bar if possible for us.

dineshrana

Amigo excelente vídeos. Un gran aporte gracias =)

getting this error :
Uncaught TypeError: progressbarDiv.progressbar is not a function

VRHari

I dont find any progress bar on UI why?

mohdasim

I have been learning c# and ASP.Net MVC from many videos and i found your videos are very clear and meaningful. I am wondering if there is any videos about deploying asp.net website with database.

prakashkandel

Is it possible to show real time percentage on the progress bar? I tried JQuery fileupload method but I had a hard time uploading files with a submit button. I need percentage info like fileupload function and this submit button functionality.

yesil

is it possible to upload files to network shared folder with asp.net ? if yes then how ?

kunalvashisht

how do I get more benefit by using jquery, asp service in hybrid mobile apps across all the mobile platform Android, iOS, windows ? could you please suggest that where and how to do mobile jquery a platform independent? I found few things that is working fine in Android app, but not in iOS app.

avineonindia

Hi, Thanks Sir for you time . i Have a question please, and it is very common for everbody here suppose Why doesnt it with jquery ajax and a webform.aspx, there is some method for do that ? i tried do this without succes. For many many hours =(

Bruno

if not using generic handler, and just uploading files via aspx.cs file, can we add this url into the scripting part, where you've chosen the handler.ashx?

Aayoustic

hey sir, I would when select the files it loads automatically without click on "upload files" button ?

saad

on line "var files = $('#FileUpload1')[0].files;" I get the following error:
"TypeError: $(...)[0] is undefined" -- can you advice?

agenciaaduanalibarrolaelia

Sir I want to save the same pdf file more than 50 times it is possible

vivek-nduu

asp net multiple file upload with progress bar

Upload multiple files in asp net core mvc

asp net multiple file upload with progress bar

Upload Multiple Files in Asp Net Core | C# | IAmUmair

Multiple File Upload using asp .net

ASP.NET Uploading Multiple Files from the Same Page

Upload multiple Files using HTML5 Input File in ASP.Net

Upload multiple Files using HTML5 Input File in ASP.Net MVC

Multiple File Upload in ASP.NET Core Razor Pages

.NET API Security: JWT Token Auth, User Profile & Password Change (EP5) | .NET Multi-Tenant CRM

Upload multiple Files to Database in ASP.Net

create folder dynamically and upload multiple files in asp.net c#4.6.1

Upload multiple files in older versions of ASP.Net 2.0, 3.0, 3.5 and 4.0

ASP.Net Upload Multiple files Using FileUpload control

Upload multiple Files in ASP.Net Core

Multiple Files Upload Control in asp.net Part-1

ASP NET MVC 4 Single and Multiple File Upload

Upload multiple Files in ASP.Net Core Razor Pages

20 -Upload and Save Multiple Files Using Database in ASP.NET

5.Multiple Files Upload in ASP.NET MVC C#

Multiple Files upload in ASP.NET and ASP.NET with jQuery

Upload Multiple Files using FileUpload Control in ASP.NET CORE

Upload Multiple Images to Database in ASP.Net

ASP.NET MVC Razor Upload multiple files to database

Uploading Multiple Files using Drag and Drop Operation [ASP.NET Core]