I have got a script for file uploading with progress bar . I have done some modifications to do some check and everything working perfectly. Just have a little problem about passing a variable from the javascript(ajax) file to the php file
here is my code:
var handleUpload = function(event){
event.preventDefault();
event.stopPropagation();
var folder = 7;
var fileInput = document.getElementById('file');
var data = new FormData();
data.append('ajax', true);
for (var i = 0; i < fileInput.files.length; ++i){
data.append('file[]', fileInput.files[i]);
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event){
if(event.lengthComputable){
var percent = event.loaded / event.total;
var progress = document.getElementById('upload_progress');
while (progress.hasChildNodes()){
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100) +' %'));
document.getElementById("loading-progress-17").style.width= Math.round(percent * 100) +'%';
}
});
request.upload.addEventListener('load', function(event){
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event){
alert('Upload failed');
});
request.addEventListener('readystatechange', function(event){
if (this.readyState == 4){
if(this.status == 200){
var links = document.getElementById('uploaded');
var uploaded = eval(this.response);
var div, a;
for (var i = 0; i < uploaded.length; ++i){
div = document.createElement('div');
a = document.createElement('a');
a.setAttribute('href', 'files/' + uploaded[i]);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
links.appendChild(div);
}
}else{
console.log('server replied with HTTP status ' + this.status);
}
}
});
request.open('POST', 'upload.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load', function(event){
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});
The form of sending is already set but can't really modify it well because didn't work with javascript much. All i try to do is to pass var folder = 7; to upload.php as seen in this part of code :
request.open('POST', 'upload.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
Any idea how to pass the variable?
eval(this.response);are you kidding me? What about the tried 'n testedJSON.parse? alsorequest.openexpects 3 params: third is a bool to indecate the request should be (a)sync:trueis what you want it to berequest.openi know it take 3 parameters but found the code like that and it's working i think it's set to true as defaultJSON.parse, besides:eval('{foo:"bar"}')won't work: eval needs parentheses:eval('('+this.responseText+')'), but eval is evil. Read the docs onXMLHttpRequesteval-ing the response opens you up to man-in-the-middle attacks, just as it does to script injection attacks. Basically,eval+ ajax isn't the only security issue, but usingjson2.jsfor older browsers takes away one vulnerability, usingevalhere, simply because there are other vulnerabilities is pure stupidity. I can't be kind about this.eval, as used here, has been proven to be a vulnerability, and there are safe(r) alternatives. Use them