php - Iframe will not display image -

i use hidden iframe post photo user selects local disk. i'm trying display image on div on same page hidden iframe. not displaying image in div , i've spent hours mucking it.

here html:

<iframe name="upload_iframe" id="upload_iframe" style="display:none"></iframe>  <form name="pictureform" method="post" autocomplete="off"              enctype="multipart/form-data">     <div>         <span>upload picture</span>         <input type="file" name="picture" id="picture"                   onchange="return fileupload(this);" />          <!-- div need uploaded image show....-->         <div id="picture_preview"></div>     </div> </form> 

when user selects image file, can see above onchange calls fileupload(this) -- here fileupload(), javascript function:

function fileupload(the_upload_field) {       // show 'progress bar' image whilst image file upload     //  -- works fine.     document.getelementbyid('picture_preview').innerhtml            = '<div><img src="images/progressbar.gif" border="0" /></div>';      // post image server using hidden iframe     the_upload_field.form.action = 'photopreview.php';     the_upload_field.form.target = 'upload_iframe';     the_upload_field.form.submit();     the_upload_field.form.action = '';     the_upload_field.form.target = '';      return true; } 

you see i'm posting hidden iframe photopreview.php -- here code:

$upload_dir = 'file-upload/upload/';     // directory file storing $preview_url = 'http://localhost/mywebsite/file-upload/upload/';   // note:  'picture' here name of open-file html element above $filename = $_files['picture']['name']; $targetdirforfile = $upload_dir .  $filename;  // extract uploaded file , put web server upload folder... move_uploaded_file($_files['picture']['tmp_name'], $targetdirforfile);  // edit: in code forgot include here, done so. $fullimagepath = $preview_url . $filename;   // php code outputing javascript code. echo '<script type="text/javascript">'."\n";  //echo 'var pardoc = window.parent.document;';  // didn't work either. echo 'var pardoc = parent.document;';  // if in html code above, see 'picture_preview'  // used here div, , that's need image appear $outstr = "pardoc.getelementbyid('picture_preview').innerhtml = '<div><img src=\'$fullimagepath\' /></div>';";  // display image 'picture_preview' div on same page // hidden iframe...  // edit: source of problem.  showalertbox() homemade // helper function displays php variables browser when i'm debugging. // if @ code below 'showalertbox()' see prematurely // ending 'javascript' section of code due own final '/script' // when comment out call showalertbox(), image appears. showalertbox("the outstr is" . $outstr);   echo $outstr; echo "\n".'</script>'; exit(); 

i see progressbar.gif in picture_preview div not uploaded image.

this should work, simple i'm not seeing, i've been @ 10 hours trying everything.

also, moving iframe inside form above made no difference @ all.

edit: fixed problem. here cause of problem, showalertbox() helper function, spits out php variables browser when i'm debugging php code, , has trailing /script prevented final line of code, 'echo outstr', executing , displaying image:

 function showalertbox($messagetodisplay)  {      echo '<script type="text/javascript">'          . 'alert("' . $messagetodisplay . '")</script>';  } 

i fixed it. had 'script' tag prematurely closing javascript code before final 'echo outstr' statement. doesn't appear in code because comes 'helper' function use called showalertbox() in php development display values of php variables in browser window -- showalertbox() uses javascript beginning 'script', 'alert( somephpvariable )' closing 'script' -- , 'shut off' final 'echo outstr' line of code supposed show image. got rid of showalertbox() call , voila works