var upload = function () {
xhr: function() {
var request = new XMLHttpRequest()
request.addEventListener("progress", function updateProgress(oEvent) {
if (oEvent.lengthComputable) {
var loaded = Math.round((oEvent.loaded / oEvent.total) * 100);
$('.progress-bar').progressbar("value", loaded);
}
});
}
}
but abow approach wont work at all. how can I do that ?
Could you please share more details?Here is a simple working demo like below:
1.View(Create.cshtml):
<style>
.progressbar {
width:300px;
height:21px;
}
.progressbarlabel {
width:300px;
height:21px;
position:absolute;
text-align:center;
font-size:small;
}
</style>
<form method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" />
<input type="button" id="select_and_upload_button" value="Upload.." />
</form>
<div id="progressbar" class="progressbar">
<div id="progresslabel" class="progressbarlabel"></div>
</div>
<div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div>
@section Scripts{
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.8.2.js"></script>
<script src="//code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
<script>
$("#select_and_upload_button").click(function () { $("#files").click(); });
function upload_files() {
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
if (files.length == 0) return;
for (var i = 0; i < files.length; i++) {
var data = new FormData();
data.append(files[i].name, files[i]);
console.log(data);
$.ajax({
type: "POST",
url: "/Users/Createdata",
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$("#progressbar").progressbar({ value: percentComplete* 100 });
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
}
}, false);
$("#progressbar").progressbar({max: 100,change: function (evt, ui) {$("#progresslabel").text($("#progressbar").progressbar("value") + "%");
}
});
return xhr;
},
contentType: false,
processData: false,
data: data,
success: function (data) {
console.log(data);
$.each(data, function (index, item) {
var sItem = "<div ><img src='/file/" + item + "' style='width:150px;'></div>";
$("#divUploaded_Results").append(sItem);
})
},
error: function () {
alert("There was error uploading files!");
}
});
}
}
</script>
}
2.Controller:
[HttpGet]
public IActionResult Create()
{
return View();
}
[HttpPost]
public async Task<IActionResult> Createdata()
{
long uploaded_size = 0;
string path_for_Uploaded_Files = System.IO.Path.Combine(_env.WebRootPath, "file");//be sure create a folder named wwwroot/file
var uploaded_files = Request.Form.Files;
int iCounter = 0;
string sFiles_uploaded = "";
List<string> list_Files = new List<string>();
foreach (var uploaded_file in uploaded_files)
{
iCounter++;
uploaded_size += uploaded_file.Length;
sFiles_uploaded += "\n" + uploaded_file.FileName;
list_Files.Add(uploaded_file.FileName);
//< Filename >
string uploaded_Filename = uploaded_file.FileName;
string new_Filename_on_Server = path_for_Uploaded_Files + "\\" + uploaded_Filename;
using (FileStream stream = new FileStream(new_Filename_on_Server, FileMode.Create))
{
await uploaded_file.CopyToAsync(stream);
}
}
return Json(list_Files);
}
Best Regards,
Rena
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
tnx for reply . but it has a long way . I would to use jquery only for showing process progress and the main code is in the form tag helper . I thought it should better
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Could you share your simple demo that could reproduce your issue?It would be helpful to resolve your issue.
Best Regards,
Rena
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
16 Points
86 Posts
how to show percent of progress using form tag helper
Oct 21, 2019 07:44 PM|aminsoraya|LINK
hi
I want to show percent of progress beside form tag helpers:
<form asp-action="Index" asp-controller="Home" enctype="multipart/form-data" data-ajax="true" data-ajax-begin="upload" data-ajax-method="post" > <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width:0%"> 0 </div> </div> <input type="file" name="files" id="files" /> <button type="submit">submit</button> </form>var upload = function () { xhr: function() { var request = new XMLHttpRequest() request.addEventListener("progress", function updateProgress(oEvent) { if (oEvent.lengthComputable) { var loaded = Math.round((oEvent.loaded / oEvent.total) * 100); $('.progress-bar').progressbar("value", loaded); } }); } }but abow approach wont work at all. how can I do that ?
Contributor
2690 Points
874 Posts
Re: how to show percent of progress using form tag helper
Oct 22, 2019 03:28 AM|Rena Ni|LINK
Hi aminsoraya,
Could you please share more details?Here is a simple working demo like below:
1.View(Create.cshtml):
<style> .progressbar { width:300px; height:21px; } .progressbarlabel { width:300px; height:21px; position:absolute; text-align:center; font-size:small; } </style> <form method="post" enctype="multipart/form-data"> <input type="file" id="files" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" /> <input type="button" id="select_and_upload_button" value="Upload.." /> </form> <div id="progressbar" class="progressbar"> <div id="progresslabel" class="progressbarlabel"></div> </div> <div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div> @section Scripts{ <link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.8.2.js"></script> <script src="//code.jquery.com/ui/1.8.24/jquery-ui.js"></script> <script> $("#select_and_upload_button").click(function () { $("#files").click(); }); function upload_files() { var fileUpload = $("#files").get(0); var files = fileUpload.files; if (files.length == 0) return; for (var i = 0; i < files.length; i++) { var data = new FormData(); data.append(files[i].name, files[i]); console.log(data); $.ajax({ type: "POST", url: "/Users/Createdata", xhr: function () { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; $("#progressbar").progressbar({ value: percentComplete* 100 }); } }, false); xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; } }, false); $("#progressbar").progressbar({ max: 100, change: function (evt, ui) { $("#progresslabel").text($("#progressbar").progressbar("value") + "%"); } }); return xhr; }, contentType: false, processData: false, data: data, success: function (data) { console.log(data); $.each(data, function (index, item) { var sItem = "<div ><img src='/file/" + item + "' style='width:150px;'></div>"; $("#divUploaded_Results").append(sItem); }) }, error: function () { alert("There was error uploading files!"); } }); } } </script> }2.Controller:
[HttpGet] public IActionResult Create() { return View(); } [HttpPost] public async Task<IActionResult> Createdata() { long uploaded_size = 0; string path_for_Uploaded_Files = System.IO.Path.Combine(_env.WebRootPath, "file");//be sure create a folder named wwwroot/file var uploaded_files = Request.Form.Files; int iCounter = 0; string sFiles_uploaded = ""; List<string> list_Files = new List<string>(); foreach (var uploaded_file in uploaded_files) { iCounter++; uploaded_size += uploaded_file.Length; sFiles_uploaded += "\n" + uploaded_file.FileName; list_Files.Add(uploaded_file.FileName); //< Filename > string uploaded_Filename = uploaded_file.FileName; string new_Filename_on_Server = path_for_Uploaded_Files + "\\" + uploaded_Filename; using (FileStream stream = new FileStream(new_Filename_on_Server, FileMode.Create)) { await uploaded_file.CopyToAsync(stream); } } return Json(list_Files); }Best Regards,
Rena
Member
16 Points
86 Posts
Re: how to show percent of progress using form tag helper
Oct 22, 2019 03:10 PM|aminsoraya|LINK
tnx for reply . but it has a long way . I would to use jquery only for showing process progress and the main code is in the form tag helper . I thought it should better
Contributor
2690 Points
874 Posts
Re: how to show percent of progress using form tag helper
Oct 24, 2019 05:53 AM|Rena Ni|LINK
Hi aminsoraya,
The code in your action you could design by yourself,I just give a working demo to share how to show pervent of progress.
From your requirement,just move the process bar to form tag helper in my previous post.It also works.
<form method="post" enctype="multipart/form-data"> <input type="file" id="files" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" /> <input type="button" id="select_and_upload_button" value="Upload.." /> <div id="progressbar" class="progressbar"> <div id="progresslabel" class="progressbarlabel"></div> </div> <div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div> </form>Result:
Best Regards,
Rena
Member
16 Points
86 Posts
Re: how to show percent of progress using form tag helper
Oct 27, 2019 06:39 AM|aminsoraya|LINK
It wont work
Contributor
2690 Points
874 Posts
Re: how to show percent of progress using form tag helper
Oct 28, 2019 05:49 AM|Rena Ni|LINK
Hi aminsoraya,
Could you share your simple demo that could reproduce your issue?It would be helpful to resolve your issue.
Best Regards,
Rena