Display image after image upload

Question

I am developing a social website.In the user registration page,user has the provision to add his photo.I have done this with little effort.My problem is that I want to display the image which has been uploaded by the user to a div,before clicking the submit button at the end of the form.I have searched a lot,but couldn't get the right one.

My html code is like this:

 <img src="<?php echo $row_picture;?>" name="picture" class="settingspic"  width="75" height="91" alt="profile pic" name="picture"/><a href="" onclick="return uploadimg()"> Upload</a></li>
 <input type="file" name="file" id="file" style="display:none;" />

My jasvascript code is:

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

@ Pavan K I am not inserting the image path name to database until user clicks the submit button — Techy, Jan 09 '13 at 06:15
Yes i knw, just use ajax to upload the image and show the image , there is also a plugin for this — Php Geek, Jan 09 '13 at 06:17
are you looking for [this](http://www.webmotionuk.co.uk/jquery-image-upload-and-crop-for-php/).. just [google search](https://www.google.co.in/search?q=php+ajax+upload+image&aq=f&oq=php+ajax+upload+image&aqs=chrome.0.57j60l2j0l3.6578&sourceid=chrome&ie=UTF-8#hl=en&tbo=d&biw=1920&bih=979&sclient=psy-ab&q=php+ajax+upload+crop+image&oq=php+ajax+upload+crop+image&gs_l=serp.3...2364.3841.0.4131.5.5.0.0.0.3.733.1761.4-1j1j1.3.0.les%3B..0.0...1c.1.XgmHloXay-Q&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.1357316858,d.Yms&fp=70b0c17457ab5a6) will do. — Mithun Satheesh, Jan 09 '13 at 06:17
[check this](http://stackoverflow.com/questions/713938/how-can-i-generate-a-screenshot-of-a-webpage-using-a-server-side-script) it may help you — Karthik Chintala, Jan 09 '13 at 06:21

score 1 · Answer 1 · answered Jan 09 '13 at 06:19

1

You have to make a Ajax call to fetch the uploaded image instantly .

Reference URL => http://www.finalwebsites.com/demos/php_ajax_upload_example.php

answered Jan 09 '13 at 06:19

Jenis Patel

1,617
1
13
20

@ jenis This is not I require.I need to display the image when user upload it,before the user submits the form – Techy Jan 09 '13 at 06:26
@Anaz A doubt you can do that. In fact, with simply PHP and file uploads using html forms, the file isnt actually uploaded until you submit the form... – flagoworld Jan 09 '13 at 06:31
@teh1 Ya,I know that.My requirement is to display the image before submitting,just like facebook registration page – Techy Jan 09 '13 at 06:33
@Anaz No doubt you have to use Ajax script for it – Jenis Patel Jan 09 '13 at 06:48
1

Facebook uses different ways of uploadin images (using javascript). You can use search engines for that... http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html?m=1 – flagoworld Jan 09 '13 at 06:48

score 1 · Answer 2 · answered Jan 09 '13 at 06:48

1

Jquery File Upload plugin is the one that you want.

http://blueimp.github.com/jQuery-File-Upload/

this will help because in above plugin as you asked "before submitting form you want to show image in div" this plugin working that way.

try it

answered Jan 09 '13 at 06:48

Dipesh Parmar

27,090
8
61
90

score 0 · Answer 3 · answered Jan 09 '13 at 06:22

0

here many plugins r present, I guess most of them wil be useful for your project

http://www.jquery4u.com/plugins/10-jquery-ajax-file-uploader-plugins/

answered Jan 09 '13 at 06:22

Php Geek

1,107
1
15
36

Display image after image upload

3 Answers3