We Keep Coding

JS script won't run/execute (no errors)

I have this script that should execute at window.onload, populating the html elements from a parsed JSON through XMLHttpRequest. The console log doesn't throw any errors but the script does nothing.
Also I'm running this on a virtual server if it makes any difference.
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xml = new XMLHttpRequest();
var url ="../assets/lang/"+lang+"/"+filename+".json"
var common ="../assets/lang/"+lang+"/!area_common.json"
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
setTimeout(comm, 10);
};
function comm(){ //this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var com = JSON.parse(this.responseText);
document.getElementById("colpick").firstElementChild.innerHTML=com.colpick;
document.getElementById("csquare").title=com.csquare;
document.getElementsByClassName("notes")[0].firstElementChild.innerHTML=com.notes;
document.getElementById("textArea").placeholder=com.textArea;
document.getElementById("save").innerHTML=com.save;
document.getElementById("wipe").innerHTML=com.wipe;
}
};
xml.open("GET", common, true);
xml.send();
};
function pop(){// also this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
var dist_lore = document.getElementsByClassName("lore")[0]//tried also with class name;
var lore01 = document.getElementById("lore01")//all these are divs with an <h2> and a <p> inside;
var lore02 = document.getElementById("lore02");
var lore03 = document.getElementById("lore03");
var lore04 = document.getElementById("lore04");
var lore05 = document.getElementById("lore05");
var lore06 = document.getElementById("lore06");
var lore07 = document.getElementById("lore07");
var lore08 = document.getElementById("lore08");
var lore09 = document.getElementById("lore09");
var lore10 = document.getElementById("lore10");
var lore11 = document.getElementById("lore11");
var lore12 = document.getElementById("lore12");
var lore13 = document.getElementById("lore13");
var lore14 = document.getElementById("lore14");
var lore15 = document.getElementById("lore15");
var lore16 = document.getElementById("lore16");
var lore17 = document.getElementById("lore17");
var lore18 = document.getElementById("lore18");
var lore19 = document.getElementById("lore19");
var lore20 = document.getElementById("lore20");
var lore21 = document.getElementById("lore21");
var lore22 = document.getElementById("lore22");
var lore23 = document.getElementById("lore23");
var lore24 = document.getElementById("lore24");
var lore25 = document.getElementById("lore25");
var lore26 = document.getElementById("lore26");
var lore27 = document.getElementById("lore27");
var lore28 = document.getElementById("lore28");
var lore29 = document.getElementById("lore29");
var lore30 = document.getElementById("lore30");
dist_lore.getElementsByTagName("h2")[0].innerHTML=file.dist_lore[0];
lore01.getElementsByTagName("h2")[0].innerHTML=file.lore01[0];
lore02.getElementsByTagName("h2")[0].innerHTML=file.lore02[0];
lore03.getElementsByTagName("h2")[0].innerHTML=file.lore03[0];
lore04.getElementsByTagName("h2")[0].innerHTML=file.lore04[0];
lore05.getElementsByTagName("h2")[0].innerHTML=file.lore05[0];
lore06.getElementsByTagName("h2")[0].innerHTML=file.lore06[0];
lore07.getElementsByTagName("h2")[0].innerHTML=file.lore07[0];
lore08.getElementsByTagName("h2")[0].innerHTML=file.lore08[0];
lore09.getElementsByTagName("h2")[0].innerHTML=file.lore09[0];
lore10.getElementsByTagName("h2")[0].innerHTML=file.lore10[0];
lore11.getElementsByTagName("h2")[0].innerHTML=file.lore11[0];
lore12.getElementsByTagName("h2")[0].innerHTML=file.lore12[0];
lore13.getElementsByTagName("h2")[0].innerHTML=file.lore13[0];
lore14.getElementsByTagName("h2")[0].innerHTML=file.lore14[0];
lore15.getElementsByTagName("h2")[0].innerHTML=file.lore15[0];
lore16.getElementsByTagName("h2")[0].innerHTML=file.lore16[0];
lore17.getElementsByTagName("h2")[0].innerHTML=file.lore17[0];
lore18.getElementsByTagName("h2")[0].innerHTML=file.lore18[0];
lore19.getElementsByTagName("h2")[0].innerHTML=file.lore19[0];
lore20.getElementsByTagName("h2")[0].innerHTML=file.lore20[0];
lore21.getElementsByTagName("h2")[0].innerHTML=file.lore21[0];
lore22.getElementsByTagName("h2")[0].innerHTML=file.lore22[0];
lore23.getElementsByTagName("h2")[0].innerHTML=file.lore23[0];
lore24.getElementsByTagName("h2")[0].innerHTML=file.lore24[0];
lore25.getElementsByTagName("h2")[0].innerHTML=file.lore25[0];
lore26.getElementsByTagName("h2")[0].innerHTML=file.lore26[0];
lore27.getElementsByTagName("h2")[0].innerHTML=file.lore27[0];
lore28.getElementsByTagName("h2")[0].innerHTML=file.lore28[0];
lore29.getElementsByTagName("h2")[0].innerHTML=file.lore29[0];
lore30.getElementsByTagName("h2")[0].innerHTML=file.lore30[0];
dist_lore.getElementsByTagName("p")[0].innerHTML=file.dist_lore[1];
lore01.getElementsByTagName("p")[0].innerHTML=file.lore01[1];
lore02.getElementsByTagName("p")[0].innerHTML=file.lore02[1];
lore03.getElementsByTagName("p")[0].innerHTML=file.lore03[1];
lore04.getElementsByTagName("p")[0].innerHTML=file.lore04[1];
lore05.getElementsByTagName("p")[0].innerHTML=file.lore05[1];
lore06.getElementsByTagName("p")[0].innerHTML=file.lore06[1];
lore07.getElementsByTagName("p")[0].innerHTML=file.lore07[1];
lore08.getElementsByTagName("p")[0].innerHTML=file.lore08[1];
lore09.getElementsByTagName("p")[0].innerHTML=file.lore09[1];
lore10.getElementsByTagName("p")[0].innerHTML=file.lore10[1];
lore11.getElementsByTagName("p")[0].innerHTML=file.lore11[1];
lore12.getElementsByTagName("p")[0].innerHTML=file.lore12[1];
lore13.getElementsByTagName("p")[0].innerHTML=file.lore13[1];
lore14.getElementsByTagName("p")[0].innerHTML=file.lore14[1];
lore15.getElementsByTagName("p")[0].innerHTML=file.lore15[1];
lore16.getElementsByTagName("p")[0].innerHTML=file.lore16[1];
lore17.getElementsByTagName("p")[0].innerHTML=file.lore17[1];
lore18.getElementsByTagName("p")[0].innerHTML=file.lore18[1];
lore19.getElementsByTagName("p")[0].innerHTML=file.lore19[1];
lore20.getElementsByTagName("p")[0].innerHTML=file.lore20[1];
lore21.getElementsByTagName("p")[0].innerHTML=file.lore21[1];
lore22.getElementsByTagName("p")[0].innerHTML=file.lore22[1];
lore23.getElementsByTagName("p")[0].innerHTML=file.lore23[1];
lore24.getElementsByTagName("p")[0].innerHTML=file.lore24[1];
lore25.getElementsByTagName("p")[0].innerHTML=file.lore25[1];
lore26.getElementsByTagName("p")[0].innerHTML=file.lore26[1];
lore27.getElementsByTagName("p")[0].innerHTML=file.lore27[1];
lore28.getElementsByTagName("p")[0].innerHTML=file.lore28[1];
lore29.getElementsByTagName("p")[0].innerHTML=file.lore29[1];
lore30.getElementsByTagName("p")[0].innerHTML=file.lore30[1];
}
};
xml.open("GET", url, true);
xml.send();
}
}
Note that I have a similar script working fine:
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xmlhttp = new XMLHttpRequest();
var url ="assets/lang/"+lang+"/!"+filename+".json";
var loc = window.location.pathname;
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
};
function pop(){
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
if (filename == "index"){
document.getElementsByTagName("title")[0].innerHTML=file.title;
document.getElementById("search").placeholder=file.search;
document.getElementById("settings").innerHTML=file.settings;
}else if (filename == "settings"){
document.getElementById("settings").innerHTML=file.settings;
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("h2")[0].innerHTML=file.h2[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
info.getElementsByTagName("p")[2].innerHTML=file.p[2];
//
info.getElementsByTagName("h2")[1].innerHTML=file.h2[1];
info.getElementsByTagName("p")[3].innerHTML=file.p[3];
info.getElementsByTagName("p")[4].innerHTML=file.p[4];
//
info.getElementsByTagName("h2")[2].innerHTML=file.h2[2];
info.getElementsByTagName("p")[5].innerHTML=file.p[5];
info.getElementsByTagName("p")[6].innerHTML=file.p[6];
document.getElementById("fileDownload").innerHTML=file.download;
//
info.getElementsByTagName("h2")[3].innerHTML=file.h2[3];
info.getElementsByTagName("h2")[4].innerHTML=file.h2[4];
}else if (filename == "about"){
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}
Any suggestions?

Video and audio create with mp4 file

In this code create only Video on chrome, i want video with Audio with one mp4/webm file. is it possible in PHP?
please give me helpful solutions.
var mediaConstraints = { audio: true, video: true };
//var isFirefox = true;
document.querySelector('#start-recording').onclick = function() {
this.disabled = true;
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
};
document.querySelector('#stop-recording').onclick = function() {
this.disabled = true;
mediaRecorder.stop();
};
var mediaRecorder;
function onMediaSuccess(stream) {
var video = document.createElement('video');
var videoWidth = document.getElementById('video-width').value || 320;
var videoHeight = document.getElementById('video-height').value || 240;
video = mergeProps(video, {
controls: true,
id:"preview",
width: videoWidth,
height: videoHeight,
src: URL.createObjectURL(stream)
});
video.play();
//videot='2000';
videosContainer.appendChild(video);
videosContainer.appendChild(document.createElement('hr'));
mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/mp4'; // this line is mandatory
mediaRecorder.videoWidth = videoWidth;
mediaRecorder.videoHeight = videoHeight;
mediaRecorder.ondataavailable = function(blob) {
//alert(blob.audio);
//alert(blob.video);
// var a = document.createElement('a');
// a.target = '_blank';
// a.innerHTML = 'Open Recorded Video No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);
// a.href = URL.createObjectURL(blob);
//videosContainer.appendChild(a);
// videosContainer.appendChild(document.createElement('hr'));
var facedeteval = document.getElementById('facedetectvalue').value;
if(facedeteval !='1')
{
//alert(facedeteval);
var testuserID = document.getElementById("tuid").value;
var capId =document.getElementById("capimg").value;
//alert(capId);
var fileType = 'video'; // or "audio"
var vname = document.getElementById('sect_id').value;
var res = vname;
fileName =res;
var fileName = res+(index++)+'.mp4'; // or "wav" or "ogg"
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
formData.append('test_uid', testuserID);
formData.append('cap_id', capId);
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open('POST', url);
request.send(data);
}
xhr('save.php', formData, function (fileURL) {
alert('video save');
stopflag = '0';
document.getElementById('facedetectvalue').value = '1';
});
}
};
var timeInterval = document.querySelector('#time-interval').value;
if(timeInterval) timeInterval = parseInt(timeInterval);
else timeInterval = 5 * 1000;
// get blob after specific time interval
mediaRecorder.start(timeInterval);
document.querySelector('#stop-recording').disabled = false;
}
function onMediaError(e) {
console.error('media error', e);
}
var videosContainer = document.getElementById('videos-container');
var index = 1;
// below function via: http://goo.gl/B3ae8c
function bytesToSize(bytes) {
var k = 1000;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)),10);
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
// below function via: http://goo.gl/6QNDcI
function getTimeLength(milliseconds) {
var data = new Date(milliseconds);
return data.getUTCHours()+" hours, "+data.getUTCMinutes()+" minutes and "+data.getUTCSeconds()+" second(s)";
}
window.onbeforeunload = function() {
document.querySelector('#start-recording').disabled = false;
};

Progress event listeners to load thumbnails one at a time

I am working on around 40 Large images each of size 9000KB.
i have below code ,all images are loading at a time which makes my screen to freeze,I want that my control will wait until the first image is successfully progress then loads completely then move on to the next one.any idea is helpful..
//dropping around 40 images
dropbox.addEventListener("drop", dropUpload, false);
function dropUpload(event) {
noop(event);
var dropMethod = event.dataTransfer;
var classicMethod = event.target;
var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
for ( var i = 0; i < dropedFiles.length; i++) {
addFilesToUpload(dropedFiles[i]);
}
}
function addFilesToUpload(file) {
var li = document.createElement("li"), div = document.createElement("div"), img, progressBarContainer = document
.createElement("div"), progressBar = document.createElement("div"), tBody;
li.appendChild(div);
progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBar.setAttribute("id", "proBar_" + (indexN++));
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
var reader = new FileReader();
reader.onerror = function(event) {
alert("couldn't read file " + event.target.error.code);
};
// Present file info and append it to the list of files
fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10)
+ " kb</div>";
fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
div.innerHTML = fileInfo;
if (reader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
img.setAttribute("class", "thumb");
img.setAttribute("id", "img_" + (indexN++));
reader.onload = (function(img, li) {
return function(evt) {
img.src = evt.target.result;
img.file = file;
};
}(img, li));
reader.readAsDataURL(file);
}
reader.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}, false);
reader.addEventListener("load", function() {
progressBarContainer.className += " uploaded";
progressBar.innerHTML = "";
}, false);
tBody = getTableBodyLayout(img, li);
document.getElementById("images_table").appendChild(tBody);
}

You can change addFilesToUpload() to take a callback when the file is done and change dropUpload() to initiate one at a time.
function dropUpload(event) {
noop(event);
var dropMethod = event.dataTransfer;
var classicMethod = event.target;
var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
var filesDone = 0;
// local function to process the next file
function next() {
if (filesDone < dropedFiles.length) {
addFilesToUpload(dropedFiles[filesDone++], next);
}
}
// do the first one
next();
}
function addFilesToUpload(file, doneCallback) {
var li = document.createElement("li"), div = document.createElement("div"), img, progressBarContainer = document
.createElement("div"), progressBar = document.createElement("div"), tBody;
li.appendChild(div);
progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBar.setAttribute("id", "proBar_" + (indexN++));
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
var reader = new FileReader();
reader.onerror = function(event) {
alert("couldn't read file " + event.target.error.code);
};
// Present file info and append it to the list of files
fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10)
+ " kb</div>";
fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
div.innerHTML = fileInfo;
if (reader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
img.setAttribute("class", "thumb");
img.setAttribute("id", "img_" + (indexN++));
reader.onload = (function(img, li) {
return function(evt) {
img.src = evt.target.result;
img.file = file;
// call the callback to tell the caller that this file is done now
doneCallback();
};
}(img, li));
reader.readAsDataURL(file);
}
reader.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}, false);
reader.addEventListener("load", function() {
progressBarContainer.className += " uploaded";
progressBar.innerHTML = "";
}, false);
tBody = getTableBodyLayout(img, li);
document.getElementById("images_table").appendChild(tBody);
}
If you want to wait to proceed to the next image until each image has loaded, then you could change the reader.onload handler to this:
reader.onload = (function(img, li) {
return function(evt) {
img.onload = function() {
// call the callback to tell the caller that this file is done now
doneCallback();
};
img.src = evt.target.result;
img.file = file;
};
}(img, li));

XMLHttpRequest don't send to another page

I use this code to upload files, and this code have a progressbar. The problem with this code is that it never send me to "upload.php" after it have uploaded the file, after it reach 100% on the progressbar. (It's not my code).
The code:
// get form data for POSTing
//var vFD = document.getElementById('upload_form').getFormData(); // for FF3
var vFD = new FormData(document.getElementById('upload_form'));
// create XMLHttpRequest object, adding few event listeners, and POSTing our data
var oXHR = new XMLHttpRequest();
oXHR.upload.addEventListener('progress', uploadProgress, false);
oXHR.addEventListener('load', uploadFinish, false);
oXHR.addEventListener('error', uploadError, false);
oXHR.addEventListener('abort', uploadAbort, false);
oXHR.open('POST', 'upload.php');
oXHR.send(vFD);
The whole script
// common variables
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';
var uploadingcanceld = "حدث خطأ أثناء تحميل الملف";
function secondsToTime(secs) { // we will use this function to convert seconds in normal time format
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (hr < 10) {hr = "0" + hr; }
if (min < 10) {min = "0" + min;}
if (sec < 10) {sec = "0" + sec;}
if (hr) {hr = "00";}
return hr + ':' + min + ':' + sec;
};
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
function fileSelected() {
// hide different warnings
document.getElementById('upload_response').style.display = 'none';
document.getElementById('error').style.display = 'none';
document.getElementById('error2').style.display = 'none';
document.getElementById('abort').style.display = 'none';
document.getElementById('warnsize').style.display = 'none';
// get selected file element
var oFile = document.getElementById('ufile').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
document.getElementById('error').style.display = 'block';
return;
}
// little test for filesize
if (oFile.size > iMaxFilesize) {
document.getElementById('warnsize').style.display = 'block';
return;
}
// get preview element
var oImage = document.getElementById('preview');
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e){
// e.target.result contains the DataURL which we will use as a source of the image
oImage.src = e.target.result;
oImage.onload = function () { // binding onload event
// we are going to display some custom image information here
sResultFileSize = bytesToSize(oFile.size);
document.getElementById('fileinfo').style.display = 'block';
document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
};
};
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}
function startUploading() {
// cleanup all temp states
iPreviousBytesLoaded = 0;
$("#upload").animate({height:'75px'},350);
$("#loadingborders").fadeIn(1500);
$("#progress_percent").fadeIn(1500);
$("#upload_button").fadeOut(100);
$("#ufile").fadeOut(100);
document.getElementById('ufile').style.margin = '5px 0px -5px 0px';
document.getElementById('upload_response').style.display = 'none';
document.getElementById('error').style.display = 'none';
document.getElementById('error2').style.display = 'none';
document.getElementById('abort').style.display = 'none';
document.getElementById('warnsize').style.display = 'none';
document.getElementById('progress_percent').innerHTML = '';
var oProgress = document.getElementById('progress');
oProgress.style.display = 'block';
oProgress.style.width = '0px';
// get form data for POSTing
//var vFD = document.getElementById('upload_form').getFormData(); // for FF3
var vFD = new FormData(document.getElementById('upload_form'));
// create XMLHttpRequest object, adding few event listeners, and POSTing our data
var oXHR = new XMLHttpRequest();
oXHR.upload.addEventListener('progress', uploadProgress, false);
oXHR.addEventListener('load', uploadFinish, false);
oXHR.addEventListener('error', uploadError, false);
oXHR.addEventListener('abort', uploadAbort, false);
oXHR.open('POST', 'upload.php');
oXHR.send(vFD);
// set inner timer
oTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // we will use this function to display upload speed
var iCB = iBytesUploaded;
var iDiff = iCB - iPreviousBytesLoaded;
// if nothing new loaded - exit
if (iDiff == 0)
return;
iPreviousBytesLoaded = iCB;
iDiff = iDiff * 2;
var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
var secondsRemaining = iBytesRem / iDiff;
// update speed info
var iSpeed = iDiff.toString() + 'B/s';
if (iDiff > 1024 * 1024) {
iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
} else if (iDiff > 1024) {
iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
}
document.getElementById('speed').innerHTML = iSpeed;
document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
}
function uploadProgress(e) { // upload process in progress
if (e.lengthComputable) {
iBytesUploaded = e.loaded;
iBytesTotal = e.total;
var iPercentComplete = Math.round(e.loaded * 100 / e.total);
var iBytesTransfered = bytesToSize(iBytesUploaded);
document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
document.getElementById('b_transfered').innerHTML = iBytesTransfered;
if (iPercentComplete == 100) {
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>';
}
} else {
document.getElementById('progress').innerHTML = 'unable to compute';
}
}
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
document.getElementById('progress_percent').innerHTML = '100%';
document.getElementById('progress').style.width = '400px';
document.getElementById('filesize').innerHTML = sResultFileSize;
document.getElementById('remaining').innerHTML = '| 00:00:00';
clearInterval(oTimer);
}
function uploadError(e) { // upload error
$('#errormessage').slideUp('fast', function() {
$('#errormessage').html(uploadingcanceld);
$('#errormessage').slideDown('fast');
});
clearInterval(oTimer);
}
function uploadAbort(e) { // upload abort
clearInterval(oTimer);
}

XHR is a dynamic data call, it's not a document forwarding call, meaning the reason why we have XHR to begin with is so that we DON'T want to forward a client to another page to get new content into the page. So you might want to wait on the XHR to complete the process of sending the data, acquire the results of that transfer via XHR, and based on those results do as you want.
So in essence, you are creating a virtual document client/server transfer and handshake without having to forward the client, that of which is the role XHR was created to fulfill.

Ajax upload without progres bar

I have a some code to ajax upload . its send request to my servlet and all works fine. But code contains a progress bar what i no need. Can u help me delete lines what i no need?
Another question how to refresh DIV with my content after upload files? When i use this code to send parametrs to jsp page
$.post(
"deletePoly.jsp",
{ids:ch.toString()},
function(per){
$("#WRAPlist").load("listing.jsp");
}
);
Where i gonn put line
$("#WRAPlist").load("listing.jsp");
this is upload code
var req;
function ajaxFunction()
{
var url = "Upload_Servlet";
if (window.XMLHttpRequest) // Non-IE browsers
{
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try
{
req.open("GET", url, true);
}
catch (e)
{
alert(e);
}
req.send(null);
}
else if (window.ActiveXObject) // IE Browsers
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.send();
}
}
}
function processStateChange()
{
* State Description
* 0 The request is not initialized
* 1 The request has been set up
* 2 The request has been sent
* 3 The request is in process
* 4 The request is complete
if (req.readyState == 4)
{
if (req.status == 200) // OK response
{
var xml = req.responseXML;
// No need to iterate since there will only be one set of lines
var isNotFinished = xml.getElementsByTagName("finished")[0];
var myBytesRead = xml.getElementsByTagName("bytes_read")[0];
var myContentLength = xml.getElementsByTagName("content_length")[0];
var myPercent = xml.getElementsByTagName("percent_complete")[0];
// Check to see if it's even started yet
if ((isNotFinished == null) && (myPercent == null))
{
document.getElementById("initializing").style.visibility = "visible";
// Sleep then call the function again
window.setTimeout("ajaxFunction();", 100);
}
else
{
document.getElementById("initializing").style.visibility = "hidden";
document.getElementById("progressBarTable").style.visibility = "visible";
document.getElementById("percentCompleteTable").style.visibility = "visible";
document.getElementById("bytesRead").style.visibility = "visible";
myBytesRead = myBytesRead.firstChild.data;
myContentLength = myContentLength.firstChild.data;
if (myPercent != null) // It's started, get the status of the upload
{
myPercent = myPercent.firstChild.data;
document.getElementById("progressBar").style.width = myPercent + "%";
document.getElementById("bytesRead").innerHTML = myBytesRead + " of " +
myContentLength + " bytes read";
document.getElementById("percentComplete").innerHTML = myPercent + "%";
// Sleep then call the function again
window.setTimeout("ajaxFunction();", 100);
}
else
{
document.getElementById("bytesRead").style.visibility = "hidden";
document.getElementById("progressBar").style.width = "100%";
document.getElementById("percentComplete").innerHTML = "Done!";
}
}
}
else
{
alert(req.statusText);
}
}
}

remove these line of codes then it will not display progressbar..
document.getElementById("initializing").style.visibility = "hidden";
document.getElementById("progressBarTable").style.visibility = "visible";
document.getElementById("percentCompleteTable").style.visibility = "visible";
document.getElementById("bytesRead").style.visibility = "visible";
myBytesRead = myBytesRead.firstChild.data;
myContentLength = myContentLength.firstChild.data;
if (myPercent != null) // It's started, get the status of the upload
{
myPercent = myPercent.firstChild.data;
document.getElementById("progressBar").style.width = myPercent + "%";
document.getElementById("bytesRead").innerHTML = myBytesRead + " of " +
myContentLength + " bytes read";
document.getElementById("percentComplete").innerHTML = myPercent + "%";
// Sleep then call the function again
window.setTimeout("ajaxFunction();", 100);
}
else
{
document.getElementById("bytesRead").style.visibility = "hidden";
document.getElementById("progressBar").style.width = "100%";
document.getElementById("percentComplete").innerHTML = "Done!";
}