How to show progress bar with file size status while uploading file in C# Asp.net and Ajax

Show Progress Bar While Uploading Files Using AJAX , Try giving below two attributes to your update panel. Hide Copy Code. ChildrenAsTriggers="true" UpdateMode="Conditional". You can not show the actual progress of the file upload. But you can show a hidden animated "loading" image with javascript. It will show while the form is submitted (with the file) to the server. Html: <img id="loading_img" style="Display: None" src="loading.gif" /> Javascript:

[Solved] How to show a progress bar while uploading file with file , I have to create an web application in asp.net with C#.net in that i have to display progress bar to show uploading status of file how should i can do this? All right, I see, so remove the call to create the progress bar as well the declaration of pBar and the method, then create one yourself with Form Designer. Name the progressbar

how can I add a progress bar with showing percentage level while , i have a question i have a website where i can upload file to. the How to display real percentage of the upload process in the progress bar? I posted articles about uploading file, but in this article I am showing uploading of file with progress bar. Here in this article I am upload two type files namely video and image. First user have to select what type of file he/she want to upload and after uploading he can see uploaded file below in a datalist. The aspx code for this is

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! CODE START HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

<head>

<title>Client Upload Using Ajax with C# Asp.net</title>

var $j = jQuery.noConflict();

function validate(file) {

var ext = file.split(".");

ext = ext[ext.length - 1].toLowerCase();

var arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif", "PNG", "xls", "pdf", "xlsx", "ppt", "pptx", "doc", "docx", "JPG"];

if (arrayExtensions.lastIndexOf(ext) == -1) {

ShowPopup("Wrong extension type.");

$j("#filestdupload").val("");

}

var counter;

function UploadFile() {

$("#status").show();

$("#loaded_n_total").show();

$("#progressBar").show();

var files = $j("#<%=filestdupload.ClientID%>").get(0).files;

counter = 0;

// Loop through files

for (var i = 0; i < files.length ; i++) {

var file = files[i];

var formdata = new FormData();

formdata.append("filestdupload", file);

var ajax = new XMLHttpRequest();

ajax.upload.addEventListener("progress", function (evt) {

if (evt.lengthComputable) {

var percentComplete = evt.loaded / evt.total;

$j("#loaded_n_total").html("Uploaded " + event.loaded + " bytes of " + event.total);

var percent = (event.loaded / event.total) * 100;

$j("#progressBar").val(Math.round(percent));

$j("#status").html(Math.round(percent) + "% uploaded... please wait");

}

}, false);

ajax.addEventListener("load", completeHandler, false);

ajax.addEventListener("error", errorHandler, false);

ajax.addEventListener("abort", abortHandler, false);

ajax.open("POST", "FileUploadHandler.ashx");

ajax.send(formdata);

}

return false;

}

function completeHandler(event) {

counter++

$j("#status").html(counter + " " + event.target.responseText);

ShowPopup(event.target.responseText);

return false;

}

function errorHandler(event) {

$j("#status").html("Upload Failed");

}

function abortHandler(event) {

$j("#status").html("Upload Aborted");

}

</script>

</head>

<body>

<p style="color: #fff!important; background-color: #d40000!important; display: block; text-align: center; text-decoration: none; width: 100%; min-height: 15px; font-size: 16px; font-weight: bold; padding: 5px;">Upload File</p>

<strong><span class="style4">Upload File Details</span></strong>

</div>

<strong>File Title : </strong>

<asp:Label runat="server" ID="lbltitle"></asp:Label>

</div>

<strong>Description : </strong>

<asp:Label runat="server" ID="lbldescription"></asp:Label>

</div>

<strong>Date of Creation : </strong>

<asp:Label runat="server" ID="lbldateofcreation"></asp:Label>

</div>

<strong>View/Download</strong>

<br />

<asp:Label ID="lblDownload" runat="server" Text="File Not Attached" Visible="false" Style="color: #622424;"></asp:Label></strong>

<asp:Label ID="lblfilename" runat="server" Visible="false"></asp:Label>

<asp:Button class="button button4" runat="server" ID="btndwn" Visible="false" Text="Download" OnClick="btndwn_Click" />

</div>

<strong><span class="style4">Client Upload Details</span></strong>

</div>

Upload File :

<asp:FileUpload class="button button4" ID="filestdupload" runat="server" onChange="validate(this.value)" />

<br />

<asp:Button class="button button4" runat="server" ID="btnstdDownload" Text="Download" Visible="false" OnClick="btnstdDownload_Click" />

<asp:Label ID="lblstdhomework" runat="server" Visible="false"></asp:Label>

</div>

Upload Date :

<asp:Label runat="server" ID="lblUploadDate"></asp:Label>

</div>

Remarks :

</div>

<asp:Label runat="server" ID="lblRemarks"></asp:Label>

</div>

<asp:Button class="button" ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="ClientSubmit"

OnClick="btnSubmit_Click" OnClientClick="return UploadFile();" />

<asp:Button class="button button2" ID="btnBack" runat="server" Text="Back"

OnClick="btnBack_Click" />

</div>

</form>

</body>

</html>

Post Top Ad

Random Posts

Popular Posts

Tags

Sponsor

How to show progress bar with file size status while uploading file in C# Asp.net and Ajax