Symfony 2 form field - image preview instead of file path

Question

I write an application with Symfony 2. I have a form which has a file field.
When there is no file chosen the view is a button of "choose file" and on the right of it text 'No file chosen'. When i select a file, the file-name appears on the right of the button.

I would like to change this behaviour:
When no file is chosen, show only the button.
After choosing a file, instead of showing the file-name I would like to generate a preview of the image.

Anyone has a simple solution for this problem?
Thanks!

Answer 1

you can change the css of the input type file to visibility:hidden and display a button there... and you can make a jquery event like this

$(document).ready(function(){
$("#idofbutton").click(function(){
   $("#idofinputtypefile").trigger('click');
});
});

and the rest you can use an iframe stimulate the upload event.

for jquery file upload please check the code link this link

http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

hope this helps