Question

Right now i’m using the below method to Upload a file to PHP

<form enctype="multipart/form-data" action="http://sserver.com/fileupload.php" method="POST">

<input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
<input type="hidden" name="filename" value="file_uploaded.gif" />
<input type="hidden" name="username" value="foobar"/>
 Please choose a file:
 <input name="uploaded" type="file" /><br />
 <input type="submit" value="Upload" />
 </form> 

I read the $_POST and $_FILE in php to complete upload like this.

$target = $_SERVER['DOCUMENT_ROOT']."/test/upload/"; 
 $target = $target . basename( $_FILES['uploaded']['name']) ; 
 echo $target;
 $ok=1; 

if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 
 {
 echo "The file ". basename( $_FILES['uploaded']['name']). " has been uploaded";
 } 
 else {
 echo "Sorry, there was a problem uploading your file.";
 }

My questions is , can i change the above said code (HTML) to an Ajax XMLHttpRequest without changes in PHP.

Answer 1

You cannot send files to the server via AJAX alone. This is because Javascript (when run in a browser) does not have access to the host’s file system.

There are ways to make AJAX-style upload boxes using iframes, where the whole page is not reloaded during an upload, but this is not a simple task in itself. jQuery provides a couple of libraries to make this easier.

EDIT As ThiefMaster rightly points out HTML5 provides mechanisms for doing this more neatly.