How to Upload image into visualforce page

Question

I need to upload image into custom object record as a rich text. Iam trying with "apex:inputFile" but it not working.

I need to develop the page like below screen, Is it possible using visualforce and apex.

Click on Browse button and select image from local system and whenever i click on upload button, the selected image display in red colour box.

Any one have any thoughts on this, Please Suggest me.

Thanks,

Answer 1

Please take a look at the sample JS code below:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

and the associated HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

Also, you can try this sample here.

Answer 2

You need to use apex:image tag to show uploaded image on visualforce page.

More info on image tag; apex:image

Answer 3

Here is a link describing how to show a image in RichText Field with VF and Apex.

***************Apex Class***************

public class ImagInsertionIntoRichText
{

 public String naam{get;set;}
 public ID folderid{get;set;}
 public Blob file{get;set;}

 public void insrt()
 {

 Document d= new Document();

 d.name = naam;
 d.body=file; // body field in document object which holds the file.
 d.folderid='00l90000000inFEAAY'; //folderid where the document will be stored insert d;
 insert d;

 Case cs = new Case();
 cs.FirstExample__Comments__c = '<img src="https://rustagiankit-developer-edition--c.ap1.content.force.com/servlet/servlet.FileDownload?file='+d.id+'" width="500" height="281"></img>'; //FirstExample is namespace & Comments__c is Rich Text Area field
 cs.Status = 'New';
 cs.Origin = 'Web';
 insert cs;
 }
}
*************************************
***************VF page***************

<apex:page controller="ImagInsertionIntoRichText">
 <apex:form>
  <apex:outputLabel value="Document Name"></apex:outputLabel>
  <apex:inputText id="name" value="{!naam}"/>

  <apex:outputLabel value="Upload Document"></apex:outputLabel>
  <apex:inputfile value="{!file}"></apex:inputfile>

  <apex:commandButton value="Save" action="{!insrt}" id="save"/>
 </apex:form>
</apex:page>
**************************************

Salesforce also recomends similar approach when uploading the images through DataLoader. https://help.salesforce.com/apex/HTViewSolution?id=000002745&language=en_US