Hi all.

I have been working with a upload file script that I found on the web. Basically it Asynchronous image file upload without AJAX. It uses a iframe for the upload form.

This link http://www.acumendesign.co.uk/acumen...ain_upload.php works on firefox but then in ie6 & 7 it does not work.

The script below is what the upload form within the iframe of the main page uses.

Code JavaScript:
<?php
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = '../uploads/'.$_FILES['image']['name'];
 
if(move_uploaded_file($ftmp, $fname)){
 
 
	?>
	<html><head><script>
	var par = window.parent.document;
	var images = par.getElementById('images');
	var image = images.getElementsByTagName('span')[0];
	var innerImage = image.getElementsByTagName('img')[0];
	image.removeChild(innerImage);
	var image_new = par.createElement('img');
	image_new.src = 'resize.php?pic=<?=$oname?>';
 
	var copy = image.getElementsByTagName('p')[0];
	copy.update('Image Uploaded!');
 
	image.insertBefore(image_new,copy);
 
 
	</script></head></html>
	<?php
}
 
?>
 
<html><head>
 
<script language="javascript">
 
function upload(){
	// hide old iframe
	var par = window.parent.document;
	var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe')[num];
	iframe.className = 'hidden';
 
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'images_upload.php';
	new_iframe.frameBorder = '0';
	new_iframe.setAttribute("id", "iframe_upload");
	par.getElementById('iframe').appendChild(new_iframe);
 
	// add image holder
	var images = par.getElementById('images');
 
	var new_image = par.createElement('span');
	new_image.className = 'upload_image';
 
	var loader = par.createElement('img');
	loader.src = '../images/uploading_img.gif';
 
	var copy = par.createElement('p');
	copy.update('Uploading & resizing image...');
 
	new_image.appendChild(loader);
	new_image.appendChild(copy);
	images.appendChild(new_image);	
 
	var old_image = images.getElementsByTagName('span')[0];
	images.insertBefore(new_image,old_image);
 
	// send
	var imgnum = images.getElementsByTagName('div').length - 1;
	document.iform.imgnum.value = imgnum;
	document.iform.submit();
}
 
</script>
 
<style type="text/css" media="screen" href="css/acucms_main.css" >
 
body{
	margin: 0px;
	padding: 12px;
	border-bottom: 1px solid #CCCCCC;
	background-color: #FFF7D3;
	font-family: "helvetica neue", "Lucida Grande", Verdana, Arial, sans-serif, "ITC Avant Garde Gothic";
 
}
 
</style>
 
</head><body>
 
<p>Please select a new image</p>
 
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onchange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</body></html>

Happy to hear your thoughts or if you have used a easier solution that works on all browsers I'd be happy to hear about it.

Thanks for your help in advance.