Upload Form Jquery/ajax To Php Problem

[Deji]

Okay, first the "HTML". I know it's probably hard to read, I like to write everything super optimised and in PHP (you get used to reading through it after a while). But it's not really important...

<form id="uploadForm" action="". $_SERVER['REQUEST_URI'] ."" method="post" enctype="multipart/form-data"><input type="hidden" name="mod" value="". $mod['id'] ."" /><table class="plain fullwidth"><thead><tr><th>". $lang['downloads']['field1h'] ."</th><th>". $lang['downloads']['field5h'] ."</th></tr></thead><tfoot><tr><td colspan="2"><fieldset class="stylish" style="padding-top:6px"><input type="submit" value="". $lang['downloads']['upfile'] ."" /></fieldset></td></tr></tfoot><tbody><tr><td><fieldset class="stylish"><input type="text" size="35" name="title" maxlength="32" /></fieldset></td><td><fieldset class="stylish"><input type="file" size="25" name="file" /></fieldset></td></tr></tbody></table></form>

Now the PHP code (ajax.inc.php):

if($_POST['act']=="upload" && $_POST['type']=="mod"){	require("getlang.inc.php");	if($_POST['title'])	{		$_POST['title'] = str_replace("c#38;", "&", $_POST['title']);		if(strlen($_POST['title']) < 3)		{			echo $lang['downloads']['submiterror1'];			exit;		}		elseif(!preg_match("#^[ a-z0-9\-\+%!'\"£$():\.,&\?]+$#i",$_POST['title']))		{			echo $lang['downloads']['submiterror2'];			exit;		}	}	else	{		echo $lang['downloads']['submiterror2'];		return;	}	print_r($_POST['file']);  // testing the output ($_FILES is empty)}

And the JQuery...

$(document).ready(function(){	$("#uploadForm").submit(function(event){		event.preventDefault();		$("#upTable").hide();		$("#waitTable").show();		var $form=$(this),mod=$form.find("input[name='mod']").val(),title=$form.find("input[name='title']").val(),file=$form.find("input[name='file']").val();		$.post("/includes/ajax.inc.php",{act:"upload",type:"mod",mod:mod,title:title,file:file,},			function(data){				if(data=="1"){window.location.replace("/mods/ucp.php");}				else				{					alert(data);					$("#upTable").show();					$("#waitTable").hide();				}			}		);

The problem is fairly obvious. File form data can simply not be passed using this method. However I want to use something like this (which is why I ignored online tutorials and had to wing it). All the online tutorials show methods using iframes, which I don't want.And as you can see, I don't want to keep the page live if the upload is successful. I just want to validate the file BEFORE the page reloads.I can't find any way to do what I want online. So hopefully someone here can help.

[justsomeguy]

It needs to submit the form to a hidden iframe, that's why you see everyone suggesting that.

[Deji]

It doesn't NEED to, that's just a way of doing it.

[Ingolme]

It's absolutely necessary, for uploading files, because there's no other way to get file data out of a user's computer. AJAX relies on Javascript, and Javascript can't access the user's filesystem due to security measures.

[Deji]

It's true that there is no way to get file data out of a user's computer with JavaScript, but that doesn't mean use an iFrame. I just want to validate the data before proceeding to the next page. Luckily, I found another way to do that.

[Ingolme]

You found a way to upload a file without reloading the page without using an iframe?

[justsomeguy]

You can use Flash or another plugin for some things like that, but then you're using plugins. People can disable plugins, they can't disable an iframe. Regardless, if you're trying to validate a file that's going to be uploaded before it's actually uploaded, then Javascript is not an option. Javascript is just one technology to get the file to a script like PHP without reloading the page.