I have been working on a user interface for customers to upload content to a server for some processing. Users may even have to upload large files and both the upload and the processing may take time. I came across an interesting jquery plugin for the purpose of showing a progress bar.
The jQuery-File-Upload plugin gives an example as follows:
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
The upload progress bar is indicated this way:
$('#fileupload').fileupload({
:
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
Notice that the function depends on data and this notion can be borrowed to the server side where given a request id, the server can indicate progress
function updateProgress() {
if (stopProgressCheck) return;
var webMethod = progressServiceURL + "/GetProgress";
var parameters = "{'requestId':'" + requestId + "'}";
$.ajax({
type: "POST",
url: webMethod,
data: parameters,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d != "NONE") { //add any necessary checks
//add code to update progress bar status using value in msg.d
statusTimerID = setTimeout(updateProgress, 100); //set time interval as required
}
},
error: function (x, t, m) {
alert(m);
}
});
}
Courtesy : https://stackoverflow.com/questions/24608335/jquery-progress-bar-server-side
The alternative to this seems to be to use the HTTP status code for 102 processing.
#application : https://1drv.ms/w/s!Ashlm-Nw-wnWtkN701ndJWdxfcO4
The jQuery-File-Upload plugin gives an example as follows:
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
The upload progress bar is indicated this way:
$('#fileupload').fileupload({
:
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
Notice that the function depends on data and this notion can be borrowed to the server side where given a request id, the server can indicate progress
function updateProgress() {
if (stopProgressCheck) return;
var webMethod = progressServiceURL + "/GetProgress";
var parameters = "{'requestId':'" + requestId + "'}";
$.ajax({
type: "POST",
url: webMethod,
data: parameters,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d != "NONE") { //add any necessary checks
//add code to update progress bar status using value in msg.d
statusTimerID = setTimeout(updateProgress, 100); //set time interval as required
}
},
error: function (x, t, m) {
alert(m);
}
});
}
Courtesy : https://stackoverflow.com/questions/24608335/jquery-progress-bar-server-side
The alternative to this seems to be to use the HTTP status code for 102 processing.
#application : https://1drv.ms/w/s!Ashlm-Nw-wnWtkN701ndJWdxfcO4
No comments:
Post a Comment