joshclarkson.net

I wanted to create a file uploading application in an Ajax style (that wouldn’t reload the page), but I found I didn’t like any of  the jQuery plugins that I found to do them.  I found that either they didn’t work or the result was not able to be styled the way I wanted.  Here is how I did using a hidden iframe to redirect the form attributes and upload the file with out reloading the host page.

Here is the HTML for the form:

<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>

The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:

<div id="iframe" style="width:0px; height:0px; visibility:none;">
</div>

The DIV in which to show the results of the callback:

<div id="textarea">
</div>

The jQuery code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#formsubmit").click(function() {
		var userFile = $('form#userfile').val();
		var max = $('form#max').val();
		var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
		$('div#iframe').append( iframe );

		$('#theuploadform').attr( "action", "uploader.php" )
		$('#theuploadform').attr( "method", "post" )
		$('#theuploadform').attr( "userfile", userFile )
		$('#theuploadform').attr( "MAX_FILE_SIZE", max )
		$('#theuploadform').attr( "enctype", "multipart/form-data" )
		$('#theuploadform').attr( "encoding", "multipart/form-data" )
		$('#theuploadform').attr( "target", "postframe" )
		$('#theuploadform').submit();
		//need to get contents of the iframe
		$("#postframe").load(
			function(){
				iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
				$("div#textarea").html(iframeContents);
			}
		);
		return false;
	});
});

</script>

You also need a php app like this uploader.php to do something with the file:

<?php

$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];

if ($maxfilesize > 5000000) {
//Halt!
   echo "Upload error:  File may be to large.<br/>";
   exit();
}else{
    // Let it go
}

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
   print('File is valid, and was successfully uploaded. ');
} else {
   echo "Upload error:  File may be to large.<br/>";
}

chmod($uploadfile, 0744);
?>