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)

• Sean: You are renaming your _file inputs as selected file -> formdata.append( 'selected file ',s_file) ;, so $_FILES['_file'] will be empty. That should be formdata.append( '_file',s_file) ;
• Suchit kumar: once replace your script with the posted one and run.

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>

• leecarter: error is : move_uploaded_file: the second argument to copy() function can't to be a directory
• leecarter: thanks now working . why you add two times if readystate , statue because it already run in onstatechange than why after again type ajax.send .
• Suchit kumar: sorry that was a mistake.apologies.