Php is not working with ajax

Question

html code

<form  method="post" name="file_upload" enctype="multipart/form-data"  id="file_upload">
    <input type="file"  id="_file" name="_file"> <br>
    <input type="button"  id="button" value="upload"/> <br>
    <progress id="p_bar" value="0" max="100" style="width:300px;"> </progress>
</form>
<p id="status"> </p>
<script src="final.js" > </script> 

js

var sfile = document.getElementById('_file') ;
var btn = document.getElementById('button') ;
var f_upload= document.getElementById('file_upload') ; 
var pbar = document.getElementById('p_bar') ;
var sbar = document.getElementById('status') ;

function upload () {
    if(sfile.files.length==0) {
    alert("files isn't select ") ;                      
    }

    var s_file = sfile.files[0] ;
    var formdata = new FormData () ;
    formdata.append( 'selected file ',s_file) ;

    var ajax = new XMLHttpRequest () ;
    ajax.upload.addEventListener("progress", progress  , false ) ; 


    function progress (event) {
        var percent = (event.loaded / event.total) * 100 ; 
        pbar.value = Math.round(percent) ;
        sbar.innerHTML = Math.round(percent)+"%.........uploaded" ;
    }

    ajax.open("POST", "final.php") ;
    ajax.send(formdata) ;
}


btn.addEventListener("click", upload , false ) ;`

PHP

<?php

$file_name = $_FILES['_file']['name'] ;
$file_temp = $_FILES['_file']['tmp_name'] ;
$file_size = $_FILES['_file']['size'] ;
$file_type = $_FILES['_file']['type'] ;
$file_error = $_FILES['_file']['size'] ;

$file_destination = "upload/".basename($file_name) ;


if( move_uploaded_file($file_temp, $file_destination) ) {
    echo "file uploaded" ;
}
else {
    echo " file is failed to upload " ;
}

In these no working on php . if i only put echo still not output in main page . also if in php we caught with name tag in html than why use of send function in ajax.like ajax.send(formdata)

Answer 1

the problem here is you are not looking for ajax response.try this:

<script>
    var sfile = document.getElementById('_file');
    var btn = document.getElementById('button');
    var f_upload= document.getElementById('file_upload');
    var pbar = document.getElementById('p_bar');
    var sbar = document.getElementById('status');
    var ajax = null;
    function upload () {
        if(sfile.files.length==0) {
            alert("files isn't select ");
            return;
        }

        var s_file = sfile.files[0];
        var formdata = new FormData();
        formdata.append('_file',s_file);//your key is _file

        ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progress  , false);
        ajax.open("POST", "final.php");
        ajax.onreadystatechange = OnStateChange;
        ajax.send(formdata);

    }

    btn.addEventListener("click", upload , false);

    function progress (event) {
        var percent = (event.loaded / event.total) * 100;
        pbar.value = Math.round(percent);
        sbar.innerHTML = Math.round(percent)+"%.........uploaded";
    }

    function OnStateChange () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            var resp = ajax.responseText;
            alert(resp);
        }
    }
</script>