SitePoint Sponsor |
|
User Tag List
Results 1 to 1 of 1
Thread: Upload image Script
-
Jul 11, 2008, 10:04 #1
- Join Date
- Oct 2006
- Posts
- 62
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Upload image Script
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.
Bookmarks