php - get image preview on upload -

I need to upload an image and then display the thumbnail preview of the image on the same page (#exx). Can someone give me some hint?

index.html

  & lt; Script & gt; Function ajaxfileload (upload_field) {// checking file type var re_text = /\.jpg|\.gif|\.jpeg/i; Var filename = upload_field.value; If (filename.search (re_text) == -1) {warning ("file should be either JPG or GIF or JPEG"); Upload_field.form.reset (); return false; } Document.getElementById ('picture_preview'). InnerHTML = '& lt; Div & gt; & Lt; Img src = "picture / progressbar.gif" range = "0" /> & Lt; / Div & gt; '; Upload_field.form.action = 'upload-picture.php'; Upload_field.form.target = 'upload_iframe'; Upload_field.form.submit (); Upload_field.form.action = ''; Upload_field.form.target = ''; Back true; } & Lt; / Script & gt; & Lt ;! - Used iframe to upload AJAX file - & gt; & Lt ;! - Debug: It's style = "display: block" - & gt; & Lt; Iframe name = "upload_iframe" id = "upload_iframe" style = "display: none;" & Gt; & Lt; / Iframe & gt; & Lt ;! - Used iframe to upload AJAX file - & gt; & Lt; Form name = "pictureForm" method = "post" autocomplete = "off" enctype = "multipart / form-data" & gt; & Lt; Div & gt; & Lt; Span & gt; Upload Image: & lt; / Span & gt; & Lt; Input type = "file" name = "picture" id = "picture" onchange = "upload ajax file (this);" / & Gt; & Lt; Span id = "picture_error" & gt; & Lt; / Span & gt; & Lt; Div id = "picture_preview" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt;   
 Upload-Picture. Php  
  & lt; Php $ upload_dir = 'Upload' '; // directory preview preview = url = 'http: // localhost / image_upload / upload /' for file; $ Filename = ''; $ Result = 'error'; $ Result_msg = ''; $ Allowed_image = array ('image / gif', 'image / jpeg', 'image / jpg', 'image / pjpeg', 'image / png'); Define ('PICTURE_SIZE_ALLOWED', 2242880); // bytes if (isset ($ _ files ['picture'])) // file is sent from the browser (if ($ $ _FILES ['image'] ['error'] == UPLOAD_ERR_OK) // no error {If_are ($ _FILES ['image'] ['type'], $ allowed_size) {if (filesypes ($ _ files ['picture'] ['tmp_name']) & lt; = PICTURE_SIZE_ALLOWED) // bytes {$ Filename = $ _FILES ['photo'] ['name']; Move_uploaded_file ($ _ files ['picture'] ['tmp_name'], $ upload_dir. $ Filename); // phpclamav clamscan // for scanning virus Passthru ('clamscan -d / var / lib / clamav - no-abstract'. $ Upload_dir $. $ Filename, $ virus_msg); // scan virus $ virus_msg = 'OK'; // c If the lamav is properly cured ($ virus_msg! = 'OK') {unlink ($ upload_dir. $ Filename); $ Result_msg = $ filename. ":" .FILE_VIRUS_AFFECTED; $ Result_msg = '& lt; font color = red & '$ Result_msg.' & Lt; / font & gt; '$ $ filename =' ';} Else {// main action - move the uploaded file to $ upload_dir $ result =' OK ';}} Other files ['picture'] ['picture'] ['tmp_name']); // or $$ _FILES ['image'] ['size'] $ file type = $ _FILES ['image'] ['type']; $ Result_msg = PICTURE_SIZE; }} And {$ result_msg = SELECT_IMAGE; }} Otherwise ($ _FILES ['image'] ['error'] == UPLOAD_ERR_INI_SIZE) $ result_msg = 'upload uploaded file _max_filesSales directive to' php.ini '; Else $ result_msg = 'Unknown error'; } // This is a PHP code to output the javascript code. Echo '& lt; Script language = "javascript" type = "text / javascript" & gt; '. "\ N"; Echo 'var parDoc = window.parent.document;'; If ($ result == 'OK') {echo 'parDoc.getElementById ("Picture_arthore"). InnerHTML = ""; '; } Else {echo "parDoc.getElementById ('image' horror). InnerHTML = '". $ Result_msg ''; '; } If ($ filename! = '') {Echo "parDoc.getElementById ('picture_preview'). InnerHTML = '& lt; img src = \' $ preview_url $ filename \ 'id = \' preview_picture_tag \ heigh = \ '100 \ 'Width = \' 100 \ 'name = \' preview_picture_tag \ '/ & gt;'; ';} resonate "\ n".' & Lt; / script & gt; '; go out (); // forward Do not go?   
  Create two folders   
  Images - Keep any loading image upload - change permission   
  Upload all these files   
  image_upload image index.html upload-picture.php