uploading files using ajax and php

Question

Hi guys I'm trying to upload file using Ajax and PHP and i did every thing in the tutorial and i got to this files: upload.js:

var handleUpload = function (event){
event.preventDefault();
event.stopPropagation();

var fileInput= document.getElementById('File');

var data= new FormData();
for(var i=0;i<fileInput.files.length;i++){
    data.append('file[]',fileInput.files[i]);
}
var request= new XMLHttpRequest();
request.addEventListener('progress',function(event){

    if(event.lengthComputable){
        alert("caesar");
    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 Filed');  
});

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

window.addEventListener('load',function(event){
var submit = document.getElementById("Submit");    
submit.addEventListener("click",handleUpload);
});

and upload.php:

 <?php 
 if(!empty($_FILES['file'])){
 foreach($_FILES['file']['name'] as $key => $name){
    if($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key],'./'.$name)){
       $uploaded[]=$name; 
    }
 }

 }
 ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4    /strict.dtd">
 <head>
 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
 <title>Upload &amp; Ajax</title>
 </head>
 <script type="text/javascript" src="upload.js"></script>
 <style type="text/css">
 #upload_progress { display: none;}
 </style>
 <body>
 <div id="uploaded">
 <?php
 if(!empty($uploaded)){
 foreach($uploaded as $name){
    echo "<div><a href='./".$name."'>".$name."</a></div>";
 }
 }
 ?>
 </div>
 <div id="upload_progress"></div>
 <div>
 <form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" enctype="multipart/form-data">
 <div>
 <input type="file" id="File" name="file[]" multiple="multiple" />
 <input type="submit" id="Submit" value="upload"/>
 </div>
 </form>
 </div>
 </body>
 </html>

i just hit upload and it shows 100% i go to the folder and i find no files if any one can help me please?

Not all browsers support file upload through ***Form Data***. See [this](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload#answer-2320097) answer for more details. You may want to consider using an `` to get around this short coming... — War10ck, Sep 20 '13 at 19:35
this typo happend while moving my script to stackoverflow editor — caesar, Sep 20 '13 at 19:35
@Fareed Where do you assign your upload "folder"? There's nothing indicating one in your `move_uploaded_file` function. Read up on it here http://php.net/manual/en/function.move-uploaded-file.php — Funk Forty Niner, Sep 20 '13 at 19:36
you are right i fixed the problem with test2.php and upload .php still some thing wrong can any one tell me where i can find a better tutorial? — caesar, Sep 20 '13 at 19:40
@Fareed [Did you not read my comment?](http://stackoverflow.com/questions/18924456/uploading-files-using-ajax-and-php#comment27941350_18924456) — Funk Forty Niner, Sep 20 '13 at 19:40
yes i did , i can do file uploading with php and html in the same folder and form but not with ajax — caesar, Sep 20 '13 at 19:43
possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Subedi Kishor, Sep 20 '13 at 19:46
Nobody here is asking about jQuery. Please do not mark this question as a duplicate pointed at an answer aimed at jQuery. That's terrible. At least find an answer that uses plain JavaScript. There is no jQuery anywhere in the question. — Bjorn, Sep 21 '13 at 03:10

score 0 · Answer 1 · answered Sep 20 '13 at 19:35

First check if your PHP file works without fancy JS. Make regular file upload work via form POST. The uploaded file goes to current folder, i.e. './'.$name. Change the folder to where you expect the file to upload.

Once you have HTML/PHP flawless - jump into fixing JS.

score 0 · Answer 2 · answered Sep 20 '13 at 19:39

These things should always be taken care whenever uploading a file:

If the folder exists where u want to upload the files.
If there is permission granted on that folder.
If the file type is allowed which is being uploaded.
Size of the file
Form must contain enctype="multipart/form-data"

uploading files using ajax and php

2 Answers2