view the preview of the image before form submit

Question

I am creating a social website.There is provision for storing images during registration of users.I want to display the preview of the image when the user uploads the image,before the form get submitted.Please help me.

This is my code in registration section

<form action="insert_scene.php" 
 method="post" id="sceneform" enctype="multipart/form-data">
<label for="image">Scene Flyer:</label>
<img src="" width="120" height="130" alt="Scene Pic" />
<a href="" onclick="return uploadimg()" > Upload</a></li>
 <input type="file" name="file" id="file" style="display:none;" />
 </form>

The javascript content is

   function uploadimg()
{
    var uploader = document.getElementById('file');
    uploader.click();
    return false;
}

This is the segment of code in the insert_scene.php(Actually the following segment of code is placed in another file which is being included in the insert_scene.php)

<?php 
ini_set('memory_limit','128M');
ini_set("post_max_size", "10M");
ini_set("upload_max_filesize", "10M");
echo "Upload: " . $_FILES["file"]["name"] . "<br />";
if ($_FILES["file"]["error"] > 0)
{
  $fileN = '';
 echo 'File Size:' .($_FILES["file"]["size"] / 1024);
}
else
{

$maxImgSize=($_FILES["file"]["size"] / 1024);

if($maxImgSize>=5121 || $maxImgSize==0){

  $fileN = '';
}
else{

move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);

  $fileN="upload/" . $_FILES["file"]["name"];

  while(file_exists($fileN)){
      $fileN="upload/" . md5($fileN).$_FILES["file"]["name"];
  }

  rename("upload/" . $_FILES["file"]["name"], $fileN);


      }
    } 
   ?>
   $scene_flyer = $fileN;

After posting the form,$scene_flyer gets the image address.But i would like to display the preview before the form in the first page gets submitted.Please help me.

I don't think you can do that, Before posting the form image is still in local machine. but you can use AJAX and show the image. — Prasanth Bendra, Feb 27 '13 at 09:22
@Prasanth Bendra How does the preview of the image is shown in facebook then?? — Techy, Feb 27 '13 at 09:23
As I said you can do it using AJAX, When user selects the image, it will be uploaded to server, and will be shown there. User will submit the form later — Prasanth Bendra, Feb 27 '13 at 09:25
Try this : http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html — Prasanth Bendra, Feb 27 '13 at 09:30
http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Prasanth Bendra, Feb 27 '13 at 09:30

score 0 · Accepted Answer · answered Feb 27 '13 at 09:23

0

Improve your code and use jQuery uploadify.

http://www.uploadify.com/demos/

Then write some simple code in the event OnUploadSuccess:

http://www.uploadify.com/documentation/uploadify/onuploadsuccess/

answered Feb 27 '13 at 09:23

Ghigo

2,312
1
18
19

This can be used for image upload also.Actually i need to display the image also – Techy Feb 27 '13 at 09:27
The php upload script can return OK:http://your.site.com/img/temp/picture_uploaded_XXXXXXX.jpg Inside OnUploadSuccess event, just check that data begins with "OK:" then use the temp uploaded image url to change image.src. $("#preview_image").attr("src","http://your.site.com/img/temp/picture_uploaded_XXXXXXX.jpg"); – Ghigo Feb 27 '13 at 09:32
We dont need any jquery libraries for this?? – Techy Feb 27 '13 at 09:51
Yes, you need it. Check uploadify examples. They are very clear! – Ghigo Feb 27 '13 at 09:52
I have seen that,But it is using flash.I am not supposed to implement flash – Techy Feb 27 '13 at 09:57
Eenthough it is not suitable for me,I can accept your answer coz any one who need the above requirement can use it – Techy Feb 27 '13 at 09:59
There is also a pure HTML5 version. Check if it suits your needs. – Ghigo Feb 27 '13 at 10:11

view the preview of the image before form submit

1 Answers1