Displaying an uploaded image with jQuery

Question

I recently started learning jQuery on Codecademy and SoloLearm. So to test my skills, I challenged myself to make an employee "flip book". By clicking de "Nieuw Smoel" button(I wrote it in Dutch, sorry :P), a form appears with the fields: "Name", "Description" and "Image". I managed to display Name and Description, but is it in any way possible to display an uploaded image as well (using only jQuery/Javascript).

I'm aware that this is easily done with PHP, but my goal is to learn more about jQuery/Javascript. Thanks in advance :D

Link to JSFiddle: https://jsfiddle.net/pht2h9z6/

Answer 1

wherever in the code you are showing the form on click, add this

$(yourImage, theForm).show()

Just separate your form and image selector by a comma

Answer 2

You mean: displaying an image that the user select on his device FOR upload it? or doing the upload from the user with only JQuery?

Anyway, you must use a service on server side... You can only use JS ( JQuery is JS before all ) to directly handle local files if the source file is also localy executed. To display the selected image in the first case, you need to retrieve it from server after upload, and for the second case, this is done without direct use of JS or JQuery through the <input type="file"> html form element ^^

Answer 3

Hi Chriag and visph, thanks for your quick answers. Could I make the "yourImage" a var by doing: var yourImage = $(#idOfHTMLelement).val();

Using the method of Chriag, would I be able to show the uploaded image as an background for the newly created div?