Passing Variable from javascript(Ajax) to PHP

Question

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 tested JSON.parse? also request.open expects 3 params: third is a bool to indecate the request should be (a)sync: true is what you want it to be — Elias Van Ootegem
– Elias Van Ootegem, Commented Sep 19, 2013 at 13:21
about first 2 questions can't really understand you . And about request.open i know it take 3 parameters but found the code like that and it's working i think it's set to true as default — user2795560
– user2795560, Commented Sep 19, 2013 at 13:25
The first 2 questions are the same thing: you don't eval JSON encoded data, you parse it using JSON.parse, besides: eval('{foo:"bar"}') won't work: eval needs parentheses: eval('('+this.responseText+')'), but eval is evil. Read the docs on XMLHttpRequest — Elias Van Ootegem
– Elias Van Ootegem, Commented Sep 19, 2013 at 13:34
@EliasVanOotegem JSON.parse should be used where available here (IE8+), but eval is not evil in this case at all. You should read up more on eval, starting with nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood. — Ray Nicholus
– Ray Nicholus, Commented Sep 19, 2013 at 14:04
@RayNicholus: I have read it, and it does state that eval-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 using json2.js for older browsers takes away one vulnerability, using eval here, 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 — Elias Van Ootegem
– Elias Van Ootegem, Commented Sep 19, 2013 at 14:29

Abdu ElGammal · Accepted Answer · 2013-09-19 14:36:06Z

1

I think your code may be

data.append('folder', folder);
request.open('POST', 'upload.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);

your variable in php will be

$_REQUEST['folder']

answered Sep 19, 2013 at 14:36

Abdu ElGammal

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2795560 Over a year ago

$_REQUEST not $_POST?

Abdu ElGammal Over a year ago

$_REQUEST includes $_POST & $_GET & $_COOKIE

Collectives™ on Stack Overflow

Passing Variable from javascript(Ajax) to PHP

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related