UPLOADING IMAGE IN SALESFORCE THROUGH VF PAGE

A very common requirement we come across is uploading image/photo through vf pages. While doing this task we need to keep in mind that we can't directly display image in visualforce page in salesforce. It should be stored at some place- There are 3 places where we can store our images

1. Documents
2. Static Resources
3. Attachments.

Below i am illustrating an example of uploading and displaying image in visualforce using Documents sobject.

<!--vf page code-->

 <apex:pageBlockSection title="Upload Photo" collapsible="false" columns="1" >  
 <apex:image url="https://c.ap1.content.force.com/servlet/servlet.FileDownload?file={!doc}" height="100"       width="100" rendered="{!showimage}" /> /*contains the url of documents,{!doc} gives the image dynamically */  
  <apex:inputFile value="{!Document.body}" filename="{!document.name}" />  
 <center><apex:commandButton value="Upload" action="{!save}" /></center>  
  </apex:pageBlockSection>  

//apex class code

 public boolean showimage{set;get;}  
  public final document t;  
   private ApexPages.StandardController stdcontroller;  
   public getdocumentid(ApexPages.StandardController stdcontroller) {  
   t = (Document) stdcontroller.getRecord();  
     t.folderid = UserInfo.getUserId(); //this saves record in My Personal Documents  
     this.stdcontroller=stdcontroller;  
     }    
  public pagereference save(){  
   this.stdcontroller.save();// this method implements the standard save method.  
   pagereference pg=new pagereference('/apex/vfpageimageupload');  
   showimage=true;  
   return pg;  
   }   
   List<document> d;  
   public id doc{set;}  
   public id getdoc()  
   {  
   d=[select id from document order by id desc limit 1]; //gets id of document inserted last in sobject  
   return d[0].id;// returns id value of list d  
   }