What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Issues with Image Upload Preview widget. Show uploaded image after it is uploaded.Asked by jaagster on February 20, 2014 at 11:22 AM
I have an image upload form. How do I get the uploaded image to show on the form once the upload is complete but before the Submit is hit?
Thank you for contacting us.
I just want to let you know that there's a widget called Image Upload Preview to achieve that in your form.
Here's how to find the image uploader widget.
If you need further assistance, please let us know.
I used the Demo and -
This widget does not show the image at all in IE8, and only shows a top section in Firefox27. It is OK in Chrome.
I tried setting width and height also in the css but that did not seem to do anything.
Unfortunately, we do not have any other tool for this task.
I have submitted a bug report ticket about mentioned Image Upload Preview widget, but I can not provide any ETA for when it will be fixed.
We will update this thread, as soon as we have any news.
Then what is the easiest way to have an uploaded image display on the upload form A thumb image would be good. I want customers to see what they uploaded before hitting Submit.
maybe this would help you, if you have some basic HTML and CSS mending skills :
you can even inject thic CSS from above page and see what happens:
<div id="upload-area"> <div id="preview"> <img width="100px" height="100px" src="http://cdn.css-tricks.com/images/icons/128px/zurb.png" id="thumb"> </div> <form action="/playground/ajax_upload" id="newHotnessForm"> <label>Upload a Picture of Yourself</label> <input type="file" size="20" id="imageUpload" class=" "> <button class="button" type="submit">Save</button> </form> </div>
but you probably must add a java script also so infact you would need to host your form on
premade HTML5 + CSS3 page on your webhosting server
I do not think that there is any other option than embedded form source code with some custom script for image preview.
Here are some related threads on a stackoverflow.com:
If you are interested in this option, we might be able to create a script example, but this will take some time.