AJAX with PHP file upload

[skyagh]

Actually i'm trying to make a file upload with ajax, previously it was done through form action. Now I want ajax to handle it. No idea why it couldn't works. below is the code.

 

AJAX code

function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest) { // For Mozilla, Safari, ...
	var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // For Internet Explorer
	var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
	if (xmlHttp.readyState == 4){
		updatepage(xmlHttp.responseText);
	}
}
xmlHttp.send(strURL);
}

function updatepage(str){
if (str=="yes") {
	alert("File was successfully uploaded.");
}
else {
	alert("Insuccessful upload. Please try again!.");
}
}

function startUpload(){
var url = "upload.php";
postRequest(url);
}

 

Partial HTML codes.

	<form method="post" name="file" enctype="multipart/form-data" onSubmit="startUpload();">
	<table width="100%" border="0" cellpadding="5" cellspacing="0">
		<tr>
			<td>Browse a File to Upload: </td>
			<td><input type="file" name="filetoupload" /></td>
		</tr>

 

PHP Codes

//-----------------------------------------------------------------------
// Directory of the uploaded files. Chmod it (777)
//-----------------------------------------------------------------------
$upload_dir = "uploads/";

//-----------------------------------------------------------------------
// Files size in bytes.
//-----------------------------------------------------------------------
$size_bytes = 3145728;

//-----------------------------------------------------------------------
// Do you want to limit the types of files uploaded. (yes/no)
//-----------------------------------------------------------------------
$limit_file_type = false; 

//-----------------------------------------------------------------------
// PHP Mime types.
//-----------------------------------------------------------------------
$allowed_file_type = array('application/zip', 'application/msword', 'application/vnd.ms-powerpoint');

//-----------------------------------------------------------------------
// Check if the directory exist or not.
//-----------------------------------------------------------------------
if (!is_dir($upload_dir)) {
die("The directory <b>($upload_dir)</b> doesn't exist");
}

//-----------------------------------------------------------------------
// Check if the directory is writable.
//-----------------------------------------------------------------------
if (!is_writeable($upload_dir)) {
die("The directory <b>(" . $upload_dir . ")</b> is NOT writable, Please Chmod (777)");
}

//-----------------------------------------------------------------------
// Check first if a file has been selected
// is_uploaded_file('filename') returns true if
// a file was uploaded via HTTP POST. Returns false otherwise.
//-----------------------------------------------------------------------
if (is_uploaded_file($_FILES['filetoupload']['tmp_name'])) {

	//-----------------------------------------------------------------------
	// Get the Size of the File.
	//-----------------------------------------------------------------------
	$size = $_FILES['filetoupload']['size'];

	//-----------------------------------------------------------------------
	// Check file size acceptable.
	//-----------------------------------------------------------------------
	if ($size > $size_bytes) {
		die("File Too Large. File must be <b>" . $size_bytes . "</b> bytes.");
	}

	//-----------------------------------------------------------------------
	// Check file type
	//-----------------------------------------------------------------------
	if (($limit_file_type == true) && (!in_array($_FILES['filetoupload']['type'],$allowed_file_type))) {
		die("Wrong file type");
	}

	//-----------------------------------------------------------------------
	// $filename will hold the value of the file name submetted from the form.
	//-----------------------------------------------------------------------
	$filename = $_FILES['filetoupload']['name'];

	//-----------------------------------------------------------------------
	// Check if file is Already EXISTS.
	//-----------------------------------------------------------------------
	if(file_exists($upload_dir.$filename)) {
		die("Oops! The file named <b>$filename </b>already exists");
	}
	//-----------------------------------------------------------------------
	// Move the File to the Directory of your choice
	// Move_uploaded_file('filename','destination') Moves afile to a new location.
	//-----------------------------------------------------------------------
	if (move_uploaded_file($_FILES['filetoupload']['tmp_name'],$upload_dir.$filename)) {

		//-----------------------------------------------------------------------
		// Tell the user that the file has been uploaded
		//-----------------------------------------------------------------------
		echo "yes";
	}
	else {
		//-----------------------------------------------------------------------
		// Print error
		//-----------------------------------------------------------------------
		echo "no";
        }
}

[skyagh]

Any idea why I couldn't make the form upload the file?

[louis83]

Hiya,

I tried to do the same thing a month back.but uu should know that this has serious security-issues and alot of forums presuaded me not too.In order to acheive the effect of Background-uploading 'ajax-like' i suggest using swfupload or jquery uploaders.They're flash based ,but achieve the same thing.

HTH,