I have made a dynamic dropdown file upload system where user can choose the engineering stream, then the semester and then subject, and the file gets uploaded in the desired directory. This works fine normally. I came across the Javascript/AJAX File Upload Progress tutorial from PHPAcademy, things worked fine until I got stuck into this.

Without adding the javascript file (for upload progress), the files get uploaded in the correct directory, show no errors in the firebug, and also gives the link to the file after it gets uploaded.

But after I add the JS file, the link doesn't come after upload, it gets uploaded in the root directory always, it shows the progress though, and the console shows two errors.

Here is my PHP code:
PHP Code:
<?php

    
if(isset($_POST['upload']))   { 
      
$path1=$_POST['one']."/"
      
$path2=$_POST['two']."/"
      
$path3=$_POST['three']."/";   
      
$upload_path=$path1.$path2.$path3;
    }
    else  {
          echo 
"Follow the instructions before uploading a file";
    }    

    if(!empty(
$_FILES['file'])) {
        foreach(
$_FILES['file']['name'] as $key => $name) {
            if(
$_FILES['file']['error'][$key]==&& move_uploaded_file($_FILES['file']['tmp_name'][$key], $upload_path."$name")) {
                
$uploaded[] = $name;
            }
        }
        if(!empty(
$_POST['ajax'])) {
            die(
json_decode($uploaded));
        }   
    }  
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> SRMUARD - Upload </title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="upload.js"></script>        
        <script type="text/javascript">
            function val()
            {
                if(document.uploads.three.selectedIndex == 0)
                {
                    alert("Please choose all the appropriate options");
                }
            }
        </script>   
        <script>
            $(function() {
                $("#text-one").change(function() {
                $("#text-two").load("textdata/" + $(this).val() + ".txt");
                });
                $("#text-two").change(function() {
                $("#text-three").load("textdata/" + $(this).val() + ".txt");
                });
            });
        </script>
    </head>
    <body>
        <div value="<?php $upload_path ?>" id="uploadpath"></div>
        <div id="uploaded">
            <?php
                
if(!empty($uploaded)) {
                    foreach(
$uploaded as $name) {
                        echo 
'File Link: '.'<a href="' $upload_path $name '" >'$name'</a><br/>';
                    }
                }
            
?>
        </div>
        <div id="upload_progress" style="display: none"></div>
        <div>
            <form action="" method="POST" enctype="multipart/form-data" name="upload" id="upload">
                <label for="file">Choose a file: </label><br/>
                    <input type="file" name="file[]" id="file" multiple="multiple"><br/><br/>               
                    <select id="text-one" name="one">                   
                        <option selected value="base">Select Department</option>
                        <option value="CSE" name="cse">Computer Science Engineering</option>
                        <option value="ECE" name="ece">Electronics & Communication Engineering</option>
                        <option value="MECH" name="mech">Mechanical Engineering</option>                        
                    </select><br/><br/> 
                    <select id="text-two" name="two"> //Displays options dynamically using text files
                        <option>Select Semester</option>
                    </select><br/><br/>                  
                    <select id="text-three" name="three"> //Displays options dynamically using text files
                        <option>Select Subject</option>
                    </select><br/><br>  
                    <input type="submit" name="upload" id="submit" value="Upload" onClick="val()" />        
            </form>
        <div>
    </body>
</html>
Here is my JS file:

Code:
var handleUpload = function(event) {

    event.preventDefault();
    event.stopPropagation();

    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) + '%'));
        }
    });

    request.upload.addEventListener('load', function(event) {
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event) {
        alert('Upload failed due to some reason!');
    });



    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;
                var phpval = document.getElementById('uploadpath').value;
                for(var i=0; i < uploaded.length; ++i) {
                    div = document.createElement('div');
                    a = document.createElement('a');
                    a.setAttribute('href', phpval + 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);
});
For the demo, you can refer this link, things will be more precise, please turn on your firebug console and check the errors and help me. I am not able to solve this.

http://ankursinha.net/ARD/upload.php

Thank You